/* ==========================================================================
   IMMERSION — design tokens
   Ref: "Handoff - Immersion LMS redesign.md" § Design tokens

   This file defines the token vocabulary only. It does NOT restyle
   components — that is what base.css, app-shell.css and learndash.css do.

   This is the single source of truth for the palette, type scale, radii and
   spacing. Nothing else in the theme may introduce a raw hex value.
   ========================================================================== */

:root {
  /* --- Ink ------------------------------------------------------------- */
  --imm-ink:            #16202b;  /* sidebar, dark cards, primary text      */
  --imm-ink-deep:       #0f1720;  /* video wells, drill bg, cert inner      */
  --imm-ink-line:       #22303c;  /* borders on dark                        */
  --imm-ink-line-2:     #2a3746;  /* panel borders on dark                  */
  --imm-ink-line-3:     #3a4b5c;  /* outlined buttons on dark               */

  /* --- Red: primary action, "today", streak ---------------------------- */
  /* Was #F0284A, which gives white text only 4.1:1 — every primary button
     failed. #e01f42 is 4.7:1 and a shade the eye reads as the same red. */
  --imm-red:            #e01f42;
  --imm-red-wash:       #fdeef1;  /* current step, highlighted passage      */
  --imm-red-wash-line:  #f6ccd4;
  /* Red as TEXT on a light wash. --imm-red itself is a fill colour: at 12px
     bold on --imm-red-wash it measures 3.7:1, under the 4.5 AA wants for text
     that size. This is 5.3:1. */
  --imm-red-ink:        #c4173a;
  /* Red text on a surface that is dark in BOTH themes — the sales hero. It
     cannot follow the theme, because the ground never changes. 7.6:1 on ink. */
  --imm-red-on-dark:    #ff8fa3;

  /* --- Magenta: checkpoints and midpoint submission ONLY --------------- */
  --imm-magenta:        #b00858;
  --imm-magenta-wash:   #fdeef4;  /* checkpoint cell                        */
  --imm-magenta-wash-2: #fdf6f9;  /* "what happens next" card               */
  --imm-magenta-line:   #f3d3e0;

  /* --- Teal: secondary action, completion, links ----------------------- */
  --imm-teal:           #3e7391;
  --imm-teal-hover:     #2f5a73;
  /* Teal as TEXT. --imm-teal is a fill: it has to stay dark enough to carry
     white, which in dark mode leaves it too dark to read AS text. Splitting the
     two jobs is the only way both can pass. */
  --imm-link:           #3e7391;
  --imm-link-hover:     #2f5a73;
  --imm-teal-light:     #68a6c6;  /* progress fills, dark-mode accents      */
  --imm-teal-wash:      #f2f7fa;  /* info cards, Karel's voice              */
  --imm-teal-wash-line: #cfe0e9;

  /* --- Type colour ----------------------------------------------------- */
  /* Split out of --imm-ink, which carried two roles: 36 uses as text and 14
     as a dark SURFACE. In dark mode those must move in opposite directions,
     so text has its own token. Identical value here — light mode is
     unchanged. */
  --imm-text:           #16202b;  /* primary text                           */
  --imm-body:           #3c4a57;  /* long-form body copy                    */
  --imm-muted:          #56636f;  /* secondary copy                         */
  /* Was #8b96a1: 3.0:1 on paper and 2.8:1 on canvas, under the 4.5 AA wants
     for label-sized text. This is 4.9 / 4.6. It was the single biggest source
     of failures in the contrast audit — 44 of them. */
  --imm-faint:          #68727d;  /* labels, eyebrows, metadata             */
  --imm-faint-dark:     #96a3b0;  /* metadata on dark (5.8:1 on ink)        */
  --imm-faint-dark-2:   #9aa7b4;
  --imm-on-dark:        #e8edf2;  /* text on ink                            */
  --imm-on-dark-2:      #c3ced8;

  /* --- Surfaces -------------------------------------------------------- */
  --imm-paper:          #fff;
  --imm-canvas:         #f6f8fa;  /* app content background                 */
  --imm-canvas-2:       #eceff2;  /* reader desk                            */
  --imm-canvas-3:       #e9ecef;

  /* --- Lines ----------------------------------------------------------- */
  --imm-line:           #e2e6ea;  /* card borders                           */
  --imm-line-2:         #d7dde3;  /* input borders                          */
  --imm-line-3:         #eef1f4;  /* row dividers                           */
  --imm-line-4:         #e8edf2;  /* inactive fills                         */
  --imm-line-dashed:    #cdd5dc;  /* locked / empty states                  */

  /* --- Progress -------------------------------------------------------- */
  --imm-progress-track: #e2e6ea;
  --imm-progress-fill:  linear-gradient(90deg, #3e7391, #68a6c6);

  /* --- Type ------------------------------------------------------------ */
  --imm-font-ui:     "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --imm-font-script: "Courier Prime", ui-monospace, "Courier New", Courier, monospace;
  --imm-font-serif:  "Newsreader", Georgia, "Times New Roman", serif;

  /* Tracking. Headings are tracked tight per the handoff. */
  --imm-track-eyebrow:  .14em;
  --imm-track-label:    .12em;
  --imm-track-h1:      -.02em;
  --imm-track-hero:    -.03em;
  --imm-track-timer:   -.035em;

  /* --- Radius ---------------------------------------------------------- */
  --imm-r-day:      5px;   /* day tracker cells                            */
  --imm-r-page:     6px;   /* script page sheet                            */
  --imm-r-nav:      7px;   /* nav items, small buttons                     */
  --imm-r-input:    8px;
  --imm-r-btn:      9px;
  --imm-r-card:    10px;
  /* Screenplay vertical rhythm — three steps, smallest to largest.
     Automatic wrap is line-height; a hard break is one gap; a new slugline
     gets the paragraph-sized one. Kept here so the drill and the reader
     cannot drift apart. */
  --imm-script-lh:       1.45;
  --imm-script-gap:      0.9em;
  --imm-script-gap-slug: 2em;

  --imm-r-panel:   12px;
  --imm-r-feature: 14px;   /* feature cards                                */
  --imm-r-frame:   26px;   /* mobile frames                                */
  --imm-r-pill:   999px;

  /* --- Spacing: 4px base ----------------------------------------------- */
  --imm-s-1:  4px;   --imm-s-2:  8px;   --imm-s-3: 12px;  --imm-s-4: 14px;
  --imm-s-5: 16px;   --imm-s-6: 18px;   --imm-s-7: 20px;  --imm-s-8: 22px;
  --imm-s-9: 26px;   --imm-s-10: 28px;  --imm-s-11: 30px; --imm-s-12: 32px;
  --imm-s-13: 40px;

  /* --- Layout ---------------------------------------------------------- */
  --imm-sidebar:      236px;
  --imm-rail:         300px;  /* course page right rail                    */
  --imm-rail-lesson:  292px;
  --imm-rail-reader:  320px;
  --imm-rail-drill:   340px;
  --imm-content-max: 1280px;
  --imm-reading-max:  900px;
  --imm-prose-max:     45em;
  /* A callout is a CARD, and its two halves must line up. --imm-prose-max is
     in `em`, which resolves against each element's own font-size — 45em is
     540px on the 12px label and 697px on the 15.5px body, so the card came out
     as two boxes of different widths with a square corner showing behind a
     rounded one. rem is the same number for both. */
  --imm-callout-max:   44rem;

  /* --- Shadow: cards are flat. The reader page sheet is the exception. -- */
  --imm-shadow-page: 0 1px 4px rgba(0, 0, 0, .06);

  /* --- Motion ---------------------------------------------------------- */
  --imm-t-btn:      120ms ease;   /* button colour/background             */
  --imm-t-progress: 400ms ease-out; /* progress bar width                 */
}
/* ==========================================================================
   Dark mode
   Ref: Karel — "a light/dark mode button, identical to the one for
   Loglineit.com". Same contract as that theme: an explicit
   [data-theme="dark"] wins, and with no explicit choice the system
   preference decides.

   Only the tokens move. Nothing in base.css, lesson.css or the rest names a
   colour directly, so redefining the vocabulary here re-themes the whole LMS.

   Accent HUES are kept — red still means "today", teal still means done,
   magenta still means checkpoint — but their washes are rebuilt as dark tints
   rather than near-white, or they would glare.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --imm-text:           #e8edf2;
    --imm-body:           #c3ced8;
    --imm-muted:          #a7b3bf;
    --imm-faint:          #8b96a1;

    --imm-paper:          #16202b;
    --imm-canvas:         #0f1720;
    --imm-canvas-2:       #131c26;
    --imm-canvas-3:       #18222d;

    --imm-line:           #22303c;
    --imm-line-2:         #2c3a49;
    --imm-line-3:         #1b2733;
    --imm-line-4:         #24313e;
    --imm-line-dashed:    #3a4b5c;

    --imm-ink:            #1d2934;
    --imm-ink-deep:       #0b1219;
    --imm-ink-line:       #2a3746;
    --imm-ink-line-2:     #33424f;
    --imm-ink-line-3:     #46586a;

    --imm-teal:           #3e7391;
    --imm-teal-hover:     #4f8fb3;
    --imm-teal-wash:      #193445;
    --imm-teal-wash-line: #2b566d;

    --imm-red-wash:       #2a1620;
    --imm-red-wash-line:  #4a2231;
    --imm-red-ink:        #ff7b90;

    --imm-magenta:        #e06aa2;
    --imm-magenta-wash:   #2a1622;
    --imm-magenta-wash-2: #1e1119;
    --imm-magenta-line:   #4a2338;
    /* Missing from the dark block, so they kept their light values: the
       progress panel stayed near-white behind pale text, and the page shadow
       stayed a light-page shadow. Found by the contrast audit, not by eye. */
    --imm-progress-track: #2a3746;
    --imm-progress-fill:  linear-gradient(90deg, #4f8fb3, #8dbfd8);
    --imm-shadow-page:    0 1px 4px rgba(0, 0, 0, .5);
    --imm-teal-light:     #8dbfd8;
    --imm-faint-dark:     #96a3b0;
    --imm-faint-dark-2:   #b3bfcb;
    --imm-red:            #e01f42;
    --imm-red-ink:        #ff8fa3;
    --imm-link:           #8dbfd8;
    --imm-link-hover:     #a8cfe3;
  }
}

:root[data-theme="dark"] {
  --imm-text:           #e8edf2;
  --imm-body:           #c3ced8;
  --imm-muted:          #a7b3bf;
  --imm-faint:          #8b96a1;

  --imm-paper:          #16202b;
  --imm-canvas:         #0f1720;
  --imm-canvas-2:       #131c26;
  --imm-canvas-3:       #18222d;

  --imm-line:           #22303c;
  --imm-line-2:         #2c3a49;
  --imm-line-3:         #1b2733;
  --imm-line-4:         #24313e;
  --imm-line-dashed:    #3a4b5c;

  --imm-ink:            #1d2934;
  --imm-ink-deep:       #0b1219;
  --imm-ink-line:       #2a3746;
  --imm-ink-line-2:     #33424f;
  --imm-ink-line-3:     #46586a;

  --imm-teal:           #3e7391;
  --imm-teal-hover:     #4f8fb3;
  --imm-teal-wash:      #193445;
  --imm-teal-wash-line: #2b566d;

  --imm-red-wash:       #2a1620;
  --imm-red-wash-line:  #4a2231;
  --imm-red-ink:        #ff7b90;

  --imm-magenta:        #e06aa2;
  --imm-magenta-wash:   #2a1622;
  --imm-magenta-wash-2: #1e1119;
  --imm-magenta-line:   #4a2338;
  /* Missing from the dark block, so they kept their light values: the
     progress panel stayed near-white behind pale text, and the page shadow
     stayed a light-page shadow. Found by the contrast audit, not by eye. */
  --imm-progress-track: #2a3746;
  --imm-progress-fill:  linear-gradient(90deg, #4f8fb3, #8dbfd8);
  --imm-shadow-page:    0 1px 4px rgba(0, 0, 0, .5);
  --imm-teal-light:     #8dbfd8;
  --imm-faint-dark:     #96a3b0;
  --imm-faint-dark-2:   #b3bfcb;
  --imm-red:            #e01f42;
  --imm-red-ink:        #ff8fa3;
  --imm-link:           #8dbfd8;
  --imm-link-hover:     #a8cfe3;
}

/* The page itself, so the browser paints the right ground behind everything. */
html { background: var(--imm-canvas); }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }