/* ==========================================================================
   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 ---------------------------- */
  --imm-red:            #F0284A;
  --imm-red-wash:       #fdeef1;  /* current step, highlighted passage      */
  --imm-red-wash-line:  #f6ccd4;

  /* --- 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;
  --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 ----------------------------------------------------- */
  --imm-body:           #3c4a57;  /* long-form body copy                    */
  --imm-muted:          #56636f;  /* secondary copy                         */
  --imm-faint:          #8b96a1;  /* labels, eyebrows, metadata             */
  --imm-faint-dark:     #7f8d9b;  /* metadata on dark                       */
  --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;
  --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;

  /* --- 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                 */
}