/* ============================================================================
   CLASSROOM TOOLS — 01-tokens.css
   Warm, rounded, tactile. Matches the station-rotation-timer house style:
   ink outlines, pill radii, hard offset shadows that collapse on press.

   Load order is load-bearing: tokens → components → document.
   ========================================================================= */

@layer reset, tokens, base, chrome, components, record, doc;

@layer tokens {

  :root {
    color-scheme: light;

    /* ---- Faces ------------------------------------------------------- */
    --font-body : "Baloo 2", ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
    --font-num  : "Baloo 2", ui-rounded, system-ui, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* ---- THE FOUR PLAY SWITCHES --------------------------------------
       Every playful effect runs through these four and nothing else.
       Anything showing a child's data neutralises all four, so a misapplied
       class renders calm instead of rendering wrong. Never hard-code these
       values in a component.
       ------------------------------------------------------------------ */
    --display-face : var(--font-body);
    --lift         : 0 4px 0 var(--ink);      /* the sticker shadow */
    --lift-lg      : 0 6px 0 var(--ink);
    --press        : 4px;                     /* travel on :active */
    --pill         : 999px;                   /* pill radius */

    /* ---- Ink and paper ------------------------------------------------ */
    --ink        : #241F33;                   /* 14.8:1 on --c-bg */
    --ink-2      : #55506B;                   /*  7.1:1 on --c-bg */
    --ink-3      : #6E6884;                   /*  4.9:1 on --c-bg */
    --paper      : #FFFFFF;

    --c-bg       : #FDF6E8;
    --c-bg-top   : #FDE8CE;
    --c-surface  : #FFFBF2;
    --c-surface-2: #FFF7E9;
    --c-fg       : var(--ink);
    --c-fg-2     : var(--ink-2);
    --c-fg-3     : var(--ink-3);
    --c-line     : var(--ink);

    /* ---- Candy accents ------------------------------------------------ */
    --pink  : #FF7BAC;
    --amber : #FFC23F;
    --mint  : #3ED9A4;
    --blue  : #56A8FF;
    --violet: #A66CFF;
    --coral : #FF6B6B;

    --c-accent    : #1E7A5F;   /* 4.9:1 on cream — text-safe green   */
    --c-accent-2  : var(--pink);
    --c-violet    : var(--violet);
    --c-on-accent : #FFFFFF;

    /* Severity. Never lurid, never colour-alone: always paired with a word
       and a texture. Escalation is by weight, not by a redder hue. */
    --c-sev-1 : var(--mint);
    --c-sev-2 : var(--amber);
    --c-sev-3 : var(--coral);
    --c-sel-bg: var(--ink);
    --c-sel-fg: #FFFBF2;

    /* ---- Structure ---------------------------------------------------- */
    --bw     : 3px;
    --bw-lg  : 4px;
    --r-card : 22px;
    --r-field: 14px;

    --tap     : 48px;
    --tap-row : 56px;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    --fs-100: 12px; --fs-200: 14px; --fs-300: 16px;
    --fs-400: 19px; --fs-500: 24px; --fs-600: 30px;
    --lh-tight: 1.25; --lh-body: 1.5;

    --bottom-chrome: 72px;
    --actionbar-h  : 76px;

    /* ---- Document skin ------------------------------------------------ */
    --doc-paper : #FFFFFF;
    --doc-ink   : #1A1A22;
    --doc-ink-2 : #4A4A57;
  }

  /* ======================================================================
     DARK — a warm night skin, not an inverted day skin. Same ink outlines,
     same sticker shadows; the paper goes to a deep plum rather than black.
     ====================================================================== */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ink        : #FFF3DE;                 /* outlines become light on dark */
      --ink-2      : #C9C0DC;
      --ink-3      : #A79EBE;
      --c-bg       : #221D31;
      --c-bg-top   : #2C2542;
      --c-surface  : #2C2640;
      --c-surface-2: #342D4A;
      --c-accent   : #4FE0AC;                 /* 8.9:1 on --c-bg */
      --c-on-accent: #1A1626;
      --c-sel-bg   : #FFF3DE;
      --c-sel-fg   : #221D31;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink        : #FFF3DE;
    --ink-2      : #C9C0DC;
    --ink-3      : #A79EBE;
    --c-bg       : #221D31;
    --c-bg-top   : #2C2542;
    --c-surface  : #2C2640;
    --c-surface-2: #342D4A;
    --c-accent   : #4FE0AC;
    --c-on-accent: #1A1626;
    --c-sel-bg   : #FFF3DE;
    --c-sel-fg   : #221D31;
  }

  /* ======================================================================
     CALM MODE — the over-the-shoulder switch, one tap from every screen.
     Also engaged automatically whenever a document is on screen.
     ====================================================================== */
  :root[data-sober="on"],
  :root[data-view="document"] {
    color-scheme: light;
    --display-face: var(--font-body);
    --lift   : 0 0 0 transparent;
    --lift-lg: 0 0 0 transparent;
    --press  : 0px;
    --pill   : 10px;
    --ink    : #241F33;
    --ink-2  : #55506B;
    --c-bg   : #F7F5F0;
    --c-bg-top: #F7F5F0;
    --c-surface: #FFFFFF;
    --c-surface-2: #F2F0EA;
    --c-accent-2: var(--c-fg);
    --c-violet  : var(--c-fg);
  }

  /* ---- Motion and contrast safety valves ------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    :root { --press: 0px; }
  }
  @media (prefers-contrast: more) {
    :root { --bw: 4px; --bw-lg: 5px; }
  }

  /* ======================================================================
     THE ENFORCEMENT.
     Anything carrying a child's data neutralises all four play switches and
     both teacher-scope accents. An app component reused inside a record
     renders calm rather than rendering wrong. The wrong thing is inert,
     not merely forbidden.
     ====================================================================== */
  .record,
  [data-child-data] {
    --display-face: var(--font-body);
    --lift   : 0 0 0 transparent;
    --lift-lg: 0 0 0 transparent;
    --press  : 0px;
    --pill   : 12px;
    --c-accent-2: var(--c-fg);   /* chrome pink cannot enter a child's record */
    --c-violet  : var(--c-fg);   /* teacher-scope colour cannot either       */
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, svg { max-width: 100%; }
  [hidden] { display: none !important; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer base {
  body {
    min-height: 100dvh;
    padding-bottom: calc(var(--bottom-chrome) + env(safe-area-inset-bottom, 0px));
    font: 700 var(--fs-300)/var(--lh-body) var(--font-body);
    color: var(--c-fg);
    background: linear-gradient(to bottom, var(--c-bg-top), var(--c-bg) 60%) fixed;
  }
  h1, h2, h3 { margin: 0 0 var(--sp-2); font-weight: 800; line-height: var(--lh-tight); }
  p { margin: 0 0 var(--sp-2); }

  :focus-visible { outline: 3px dashed var(--c-fg); outline-offset: 3px; }

  .skip-link {
    position: absolute; left: -9999px;
    background: var(--c-surface); color: var(--c-fg);
    border: var(--bw) solid var(--c-line); border-radius: var(--pill);
    padding: var(--sp-2) var(--sp-4);
  }
  .skip-link:focus { left: var(--sp-3); top: var(--sp-3); z-index: 100; }
}