/*
 * Evolve OS — tokens.css (DX-1) — THE single source of truth for owner surfaces.
 *
 * Every color / spacing / radius / shadow / type / motion / microstate value an owner surface
 * uses lives here as a CSS custom property. One file, one import. The dark-turquoise identity
 * (#14B8A6 family) is refined, not replaced: the console is dark-FIRST — the dark palette is
 * the brand, not a preference toggle — so dark tokens are the default :root layer and the
 * light theme is the override (inverted from the legacy light-first design-system.css, which
 * this file replaces as surfaces migrate: login CP0, dashboard CP1, guide CP2).
 *
 * Reconciles the two drifts the consolidation pass found:
 *   - brand teal #14B8A6 (CLAUDE.md lock) vs the login's one-off #2ABFB3/#35CDBF pair
 *     → ONE ramp; dark accent = #2DD4BF (CLAUDE.md dark lock), hover/glow = #5EEAD4.
 *   - blue-gray dark text (#94A3B8/#8A90A6) vs teal-tinted console text (#A9C9C4/#7FA6A1)
 *     → the console speaks ONE hue family: teal-tinted grays on a teal-tinted ground.
 */

@import url('./fonts.css');

:root {
  /* ── Brand ramp (LOCKED — never retune per-page) ─────────────────────────── */
  --teal-100:#CCFBF1; --teal-200:#99F6E4; --teal-300:#5EEAD4; --teal-400:#2DD4BF;
  --teal-500:#14B8A6; --teal-600:#0D9488; --teal-700:#0F766E;

  /* ── Console ground (dark-first; teal-tinted near-black, never pure black) ── */
  --ground:   #081616;   /* page ground   */
  --ground-2: #0A1C1B;   /* recessed      */
  --panel:    #0C1F1F;   /* cards/inputs  */
  --navy:     #14323D;   /* distinct field panel */
  --surface:  #0C1F1F;   /* alias for legacy consumers */
  --surface-2:#102728;

  /* ── Console text (ONE hue family — teal-tinted; contrast-verified on --ground) ── */
  --ink:        #EAF6F4;  /* primary   ~15:1 AAA */
  --muted:      #A9C9C4;  /* secondary ~9:1  AAA */
  --faint:      #7FA6A1;  /* tertiary  ~5.1:1 AA (small text floor — never below) */
  --text-primary:   var(--ink);    /* legacy aliases for migrating consumers */
  --text-secondary: var(--muted);
  --text-muted:     var(--faint);

  /* ── Accents & semantics (dark) ──────────────────────────────────────────── */
  --accent:        var(--teal-400);   /* #2DD4BF — CLAUDE.md dark lock */
  --accent-bright: var(--teal-300);   /* #5EEAD4 — glow / gradient end */
  --accent-deep:   var(--teal-700);   /* #0F766E — pressed/emphasis */
  --accent-ink:    #04140F;           /* text ON accent fills */
  --line:        rgba(234,246,244,.10);
  --line-strong: rgba(234,246,244,.18);
  --border: var(--line);              /* legacy alias */
  --danger:#FF8080; --danger-bg:rgba(255,107,107,.12); --danger-bd:rgba(255,107,107,.34);
  --success:#34D399; --warning:#FBBF24; --info:#60A5FA;
  --on-accent: var(--accent-ink);

  /* ── Typography (Arabic-first) ───────────────────────────────────────────── */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-num: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; /* Latin digits, tabular */
  /* Arabic needs more line-height than Latin at equal sizes; never letter-space Arabic. */
  --text-xs:   .75rem;   --lh-xs:   1.5;
  --text-sm:   .875rem;  --lh-sm:   1.55;
  --text-base: 1rem;     --lh-base: 1.7;
  --text-lg:   1.125rem; --lh-lg:   1.6;
  --text-xl:   1.25rem;  --lh-xl:   1.5;
  --text-2xl:  1.5rem;   --lh-2xl:  1.45;
  --text-3xl:  2rem;     --lh-3xl:  1.35;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* ── Spacing / radii (unchanged scale, one home) ─────────────────────────── */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px;  --sp-10:40px; --sp-12:48px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;

  /* ── Elevation (dark-native: ambient depth + teal ambient + inset TOP-light;
        never a white-mode drop shadow, never pure black) ──────────────────── */
  --shadow-1: 0 10px 28px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-2: 0 30px 80px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(45,212,191,.10), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-accent: 0 12px 30px -10px rgba(45,212,191,.55), inset 0 1px 0 rgba(255,255,255,.28);
  --glass-bg: rgba(12,31,31,.66);
  --glass-border: rgba(45,212,191,.16);

  /* ── Motion — ONE ease-out curve, opacity+transform only, CLS=0 ──────────── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   150ms var(--ease-out);
  --t-normal: 250ms var(--ease-out);
  --t-slow:   400ms var(--ease-out);

  /* ── Microstates — systematic interactivity, not per-page invention ──────── */
  --ms-ring:      0 0 0 4px rgba(45,212,191,.22);   /* focus glow            */
  --ms-ring-line: var(--accent);                    /* focus border          */
  --ms-lift:      translateY(-1px);                 /* hover raise           */
  --ms-press:     scale(.985);                      /* active press          */
  --ms-hover-shadow: 0 16px 40px -10px rgba(45,212,191,.7), inset 0 1px 0 rgba(255,255,255,.28);
  --ms-disabled-opacity: .55;
  --ms-placeholder: var(--muted);
}

/* ── Light theme (secondary; console ships dark-first) ─────────────────────── */
html[data-theme="light"] {
  --ground:#F7FAFB; --ground-2:#FFFFFF; --panel:#FFFFFF; --navy:#EEF4FF;
  --surface:#FFFFFF; --surface-2:#F3F6F7;
  --ink:#1A1A2E; --muted:#475569; --faint:#64748B;   /* AA on white at small sizes */
  --accent:var(--teal-500); --accent-bright:var(--teal-600); --accent-deep:var(--teal-700);
  --accent-ink:#FFFFFF;
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.14);
  --danger:#DC2626; --danger-bg:rgba(252,165,165,.20); --danger-bd:rgba(252,165,165,.40);
  --success:#16A34A; --warning:#B45309; --info:#2563EB;
  --glass-bg:rgba(255,255,255,.65); --glass-border:rgba(255,255,255,.35);
  --shadow-1: 0 4px 24px rgba(15,118,110,.08);
  --shadow-2: 0 12px 48px rgba(15,118,110,.14);
  --shadow-accent: 0 10px 30px rgba(20,184,166,.25);
  --ms-ring: 0 0 0 4px rgba(20,184,166,.20);
  --ms-hover-shadow: 0 12px 32px rgba(20,184,166,.30);
}

/* ── Microstate utilities (the systematic layer; use the tokens anywhere else) ── */
.ms-lift   { transition: transform var(--t-fast), box-shadow var(--t-fast); }
.ms-lift:hover { transform: var(--ms-lift); }
.ms-press:active { transform: var(--ms-press); }
.ms-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tabular numerals for data (policy-i building block; the formatter owns the choice) */
.nums, [data-nums] { font-variant-numeric: tabular-nums; }

/* ── Reduced motion: forces transition:none, nothing hidden, CLS stays 0 ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}