/* ============================================================================
   tokens.css — Task & Learn v2 design tokens.
   THE single source of every color / size / effect value in the platform
   (docs/DESIGN_SYSTEM.md — frozen). Rule: no hex value may exist in any file
   other than this one (CLAUDE.md §4.4). All values below were verified
   computationally (WCAG contrast + CVD) in phase 1 — never tweak by eye.

   Layers: tokens.css → base.css → components.css (→ pages/*.css)
   Themes: :root = light (default) • [data-theme="dark"] = warm dark.
   ============================================================================ */

:root {

  /* ---- 2.1 Primary scale — deep teal --------------------------------- */
  --primary-50:  #EDF6F4;
  --primary-100: #D8ECE9;
  --primary-200: #B0D9D3;
  --primary-300: #7FC2B9;
  --primary-400: #45A79B;
  --primary-500: #128578;   /* brand */
  --primary-600: #0C6A60;   /* primary button bg (light) */
  --primary-700: #0A554D;   /* button hover + link color (light) */
  --primary-800: #08423C;   /* active/pressed */
  --primary-900: #062F2B;

  /* ---- 2.2 Warm sand neutrals (light) --------------------------------- */
  --bg:            #F7F4EE;
  --surface:       #FFFFFF;
  --surface-alt:   #EFEAE1;
  --border:        #E3DCCF;
  --border-strong: #C9C0AE;
  --ink:           #221F1A;
  --ink-2:         #5A554B;
  --ink-3:         #756D5F;
  --ink-inverse:   #FFFFFF;

  /* ---- 2.3 Single accent — warm terracotta (use sparingly) ------------ */
  --accent-100: #F9E7DC;
  --accent-500: #C05A2A;
  --accent-600: #A84D22;
  --accent-700: #8C3F1B;

  /* ---- 2.4 Semantic (unified with chart value colors §9.2) ------------ */
  --success:      #35824B;
  --warning:      #C9761B;   /* large text / icon+text only; small text uses --ink */
  --danger:       #BF4433;
  --info:         #3E6DAD;
  --success-soft: #E7F2EA;
  --warning-soft: #F8EEDF;
  --danger-soft:  #F8E9E6;
  --info-soft:    #EAF0F8;
  /* Badge ink on soft warning bg (§7.4 — the one value with no scale slot) */
  --warning-ink:  #8C5312;

  /* ---- 2.5 Link + focus ----------------------------------------------- */
  --link:       var(--primary-700);
  --focus-ring: var(--primary-500);

  /* ---- Derived component tokens (no new colors — rules from §7) -------- */
  --danger-hover:   #B03F2F;              /* --danger darkened 8% (§7.1 hover rule) */
  --primary-tint:   var(--primary-50);    /* row hover / unread / student bubble / empty icon */
  --icon-accent:    var(--primary-600);   /* decorative-interactive icon color */
  --skeleton-sheen: rgba(255, 255, 255, .6);

  /* ---- Buttons (theme-dependent slots) --------------------------------- */
  --btn-primary-bg:     var(--primary-600);
  --btn-primary-hover:  var(--primary-700);
  --btn-primary-active: var(--primary-800);

  /* ---- 3.1 Font stack (self-hosted, see base.css @font-face) ---------- */
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;

  /* ---- 3.2 Type scale (16px root) -------------------------------------- */
  --fs-display: 2rem;        --lh-display: 2.75rem;   /* 32/44, w700 */
  --fs-h1:      1.625rem;    --lh-h1:      2.375rem;  /* 26/38, w600 */
  --fs-h2:      1.3125rem;   --lh-h2:      2rem;      /* 21/32, w600 */
  --fs-h3:      1.0625rem;   --lh-h3:      1.625rem;  /* 17/26, w600 */
  --fs-body-lg: 1.0625rem;   --lh-body-lg: 1.875rem;  /* 17/30 */
  --fs-body:    0.9375rem;   --lh-body:    1.625rem;  /* 15/26 */
  --fs-body-sm: 0.8125rem;   --lh-body-sm: 1.3125rem; /* 13/21 */
  --fs-caption: 0.75rem;     --lh-caption: 1.125rem;  /* 12/18, w500 */
  --measure: 65ch;           /* max line length for long-form text */

  /* ---- 4.1 Spacing — 4px base ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- 4.2 Radius — moderate, never above 16px on containers ----------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- 4.3 Shadows — subtle, two layers max ----------------------------- */
  --shadow-sm: 0 1px 2px rgba(34, 31, 26, .06);
  --shadow-md: 0 2px 8px rgba(34, 31, 26, .08);
  --shadow-lg: 0 8px 28px rgba(34, 31, 26, .14);

  /* ---- 4.4 Motion — functional only ------------------------------------- */
  --dur-1: 150ms;   /* hover/focus */
  --dur-2: 200ms;   /* open/close */
  --dur-3: 250ms;   /* wizard step transitions */
  --ease:  cubic-bezier(.2, .7, .3, 1);

  /* ---- 4.5 Z-index layers ------------------------------------------------ */
  --z-nav:            100;
  --z-dropdown:       200;
  --z-modal-backdrop: 300;
  --z-modal:          310;
  --z-toast:          400;

  /* ---- 4.6 Layout (breakpoints live in media queries: 600/900/1200) ----- */
  --container: 1100px;

  /* ---- 7.6 Modal backdrop ------------------------------------------------ */
  --backdrop: rgba(20, 18, 14, .5);

  /* ---- 9.1 Chart series (categorical — fixed order, identity-bound) ----- */
  --chart-1: #009184;   /* main series (current student data) */
  --chart-2: #3E6DAD;   /* comparison series ("before") */
  --chart-3: #C08A00;
  --chart-4: #A2568F;

  /* ---- 9.2 Value colors (good/mid/weak — judgment, never identity) ------ */
  --value-good: var(--success);
  --value-mid:  var(--warning);
  --value-weak: var(--danger);

  /* ---- 9.3 Sequential teal scale (heatmap/density; ordinal starts at 4) - */
  --chart-seq-1: #D7F0EC;
  --chart-seq-2: #AEDFD8;
  --chart-seq-3: #7FCCC1;
  --chart-seq-4: #62BCB0;
  --chart-seq-5: #3AA898;
  --chart-seq-6: #009184;
  --chart-seq-7: #04756B;
  --chart-seq-8: #075A52;

  /* ---- 9.4 Chart chrome --------------------------------------------------- */
  --chart-grid:        #EBE6DB;
  --chart-axis:        var(--border-strong);
  --chart-text:        var(--ink-3);
  --chart-tooltip-bg:  var(--ink);
  --chart-tooltip-ink: var(--ink-inverse);
}

/* ============================================================================
   Dark theme — warm brown-gray, never cold technical black (§2.5).
   Same token names, alternate values. Toggled via data-theme on <html>,
   persisted in localStorage + cookie (read by PHP to prevent FOUC).
   ============================================================================ */
[data-theme="dark"] {

  --bg:            #14120E;
  --surface:       #211E18;   /* reference chart surface */
  --surface-alt:   #2A261F;
  --border:        #3A352C;
  --border-strong: #4A4437;
  --ink:           #F0EBE1;
  --ink-2:         #C8C1B2;
  --ink-3:         #9C9484;
  --ink-inverse:   #221F1A;

  --link:       #4DB4A6;
  --focus-ring: var(--primary-400);

  /* Derived component tokens — dark equivalents (soft-rgba pattern of §2.4) */
  --danger-hover:   #CE624E;              /* dark --danger darkened 8% */
  --primary-tint:   rgba(43, 170, 156, .12);
  --icon-accent:    var(--primary-400);   /* §2.1: interactive icons in dark */
  --skeleton-sheen: rgba(255, 255, 255, .06);

  /* Primary button in dark: primary-500 bg, white text (§2.5) */
  --btn-primary-bg:     var(--primary-500);
  --btn-primary-hover:  var(--primary-600);
  --btn-primary-active: var(--primary-700);

  /* Accent soft bg follows the dark "soft" pattern of §2.4 */
  --accent-100: rgba(192, 90, 42, .16);

  /* Semantic (dark values, §2.4) */
  --success:      #4CAE66;
  --warning:      #E0952F;
  --danger:       #E06A55;
  --info:         #6690DB;
  --success-soft: rgba(76, 174, 102, .16);
  --warning-soft: rgba(224, 149, 47, .16);
  --danger-soft:  rgba(224, 106, 85, .16);
  --info-soft:    rgba(102, 144, 219, .16);
  --warning-ink:  #E0952F;

  /* Shadows become clearer borders + a light black shadow (§4.3) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .35);

  --backdrop: rgba(0, 0, 0, .55);

  /* Charts (dark surface #211E18, §9.1/9.4) */
  --chart-1: #2BAA9C;
  --chart-2: #6690DB;
  --chart-3: #B98416;
  --chart-4: #BC77AA;
  --chart-grid: #2E2A22;
}