/* ═══════════════════════════════════════════════════════════════════════════
   IMMERSA — Design Tokens (Phase 27 · UI Refinement · Foundation)
   ───────────────────────────────────────────────────────────────────────────
   The single source of truth for color, typography, space, motion, elevation.
   Loaded FIRST in every page, before brand.css / dashboard.css / inline.

   Phase 1 principle: ADDITIVE ONLY.
     - Surface / accent / text colors that already exist in brand.css and
       dashboard.css are NOT redefined here. They keep their current values.
     - This file adds the NEW slots the component system needs from Phase 2
       onward: extended elevation ladder, full type scale, spacing scale,
       radii, motion primitives, z-index scale, layout constants.
     - Loading this file must produce zero visible change.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Extended surface ladder ──────────────────────────────────────────
     --bg / --bg2 / --surface / --surface2 / --border / --border2 already
     live in brand.css + dashboard.css. The slots below fill the gaps the
     elevation model (e-1 / e-2 / e-3) needs. */
  --surface-2:      #111a2e;   /* elevated — modals, popovers, dropdowns */
  --surface-3:      #16223c;   /* hover state on elevated surfaces */
  --border-strong:  #2a3d66;   /* focused inputs, selected cards */

  /* ─── Extended text hierarchy ──────────────────────────────────────────
     Phase 25 F-017 raised --muted to #9aafcc for WCAG AA (ratio 7.1:1 on
     --bg — AAA). We re-declare it here so brand.css's alias
     (--muted: var(--im-text-mute)) doesn't silently drift back.
     --text-dim is the tertiary tier — captions, table footnotes. */
  --text-strong:    #ffffff;
  --muted:          #9aafcc;
  --text-dim:       #6b7e9e;

  /* ─── Interactive state pairs ──────────────────────────────────────── */
  --accent-2:       #00b8d4;   /* hover of --accent (cyan remains primary) */
  --gold-2:         #b89038;   /* hover of --gold */

  /* ─── Semantic status ──────────────────────────────────────────────── */
  --warning:        #f4b840;   /* quota warnings, pending states */
  /* --success, --danger already defined upstream */

  /* ─── Type scale — rem-based for user font-scaling (a11y) ──────────
     1.25 ratio (major third). --font-sans / --font-mono inherited. */
  --fs-xs:    0.75rem;    /* 12px — captions, metadata */
  --fs-sm:    0.875rem;   /* 14px — body small, table cells */
  --fs-base:  1rem;       /* 16px — body default */
  --fs-md:    1.125rem;   /* 18px — lead paragraph */
  --fs-lg:    1.375rem;   /* 22px — section headings */
  --fs-xl:    1.75rem;    /* 28px — page headings */
  --fs-2xl:   2.25rem;    /* 36px — hero headings */
  --fs-3xl:   3rem;       /* 48px — landing hero */

  /* Line heights — Arabic needs slightly looser than Latin */
  --lh-tight: 1.15;   /* display */
  --lh-snug:  1.35;   /* headings */
  --lh-base:  1.55;   /* body */
  --lh-loose: 1.75;   /* long-form reading */

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;   /* reserve for display only */

  /* Letter spacing — Arabic dislikes tight tracking */
  --tracking-tight:  -0.01em;   /* Latin display only */
  --tracking-normal: 0;
  --tracking-wide:   0.03em;    /* mono, uppercase labels */

  /* ─── Spacing — rem, 4px base ──────────────────────────────────────── */
  --s-0:   0;
  --s-1:   0.25rem;   /* 4px  */
  --s-2:   0.5rem;    /* 8px  */
  --s-3:   0.75rem;   /* 12px */
  --s-4:   1rem;      /* 16px */
  --s-5:   1.5rem;    /* 24px */
  --s-6:   2rem;      /* 32px */
  --s-7:   3rem;      /* 48px */
  --s-8:   4rem;      /* 64px */
  --s-9:   6rem;      /* 96px */
  --s-10:  8rem;      /* 128px */

  /* ─── Radii — px (radii must not scale with user font-size) ────────── */
  --r-sm:   6px;      /* chips, small buttons */
  --r-md:   10px;     /* inputs, cards */
  --r-lg:   14px;     /* elevated cards, modals */
  --r-xl:   20px;     /* hero elements */
  --r-pill: 999px;

  /* ─── Elevations — px shadow, tuned for dark surface ─────────────── */
  --e-1: 0 1px 2px rgb(0 0 0 / 0.3),
         0 0 0 1px var(--border);
  --e-2: 0 4px 12px rgb(0 0 0 / 0.4),
         0 0 0 1px var(--border);
  --e-3: 0 16px 40px rgb(0 0 0 / 0.55),
         0 0 0 1px var(--border2);
  --e-glow-accent: 0 0 0 3px rgb(0 229 255 / 0.15);   /* focus ring */
  --e-glow-danger: 0 0 0 3px rgb(255 77 109 / 0.2);

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);       /* default — confident exit */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* delightful entries only */

  /* ─── Z-index scale ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal-bg: 900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ─── Layout constants ─────────────────────────────────────────── */
  --max-content: 1280px;
  --max-reading: 72ch;
  --sidebar-w:   260px;
  --topbar-h:    64px;
}