/* ==========================================================
   AISEL — DESIGN TOKENS
   Single source of truth for color, spacing, type, radius,
   shadow, motion, and glass values. Loaded FIRST, before any
   other stylesheet. Nothing in this file renders anything —
   it only names values so every section pulls from one place
   instead of hand-picking px/rgba per file.

   Identity: terminal / developer-lab aesthetic is primary.
   Glass tokens exist for SUBTLE use only (cards, nav, modals,
   stat panels) — see --glass-* below — never as the dominant
   surface treatment.
========================================================== */

:root{

  /* ---------- color: base ---------- */
  --bg:#EEF1F6;
  --bg-alt:#E2E7F0;
  --card:#FBFCFE;
  --ink:#12182B;
  --ink-soft:#4A5268;
  --ink-faint:#7C86A0;
  --line:#CBD2E1;

  /* ---------- color: accents ---------- */
  --violet:#6355C7;
  --violet-rgb:99,85,199;
  --teal:#12897A;
  --teal-rgb:18,137,122;
  --amber:#B3791A;
  --amber-rgb:179,121,26;

  /* ---------- color: terminal surface ---------- */
  --term-bg:#12182B;
  --term-ink:#E7EAF3;

  /* ---------- color: semantic aliases (use these in new code) ---------- */
  --color-success:var(--teal);
  --color-warning:var(--amber);
  --color-accent:var(--violet);
  --color-danger:#C0392B;

  /* ---------- layout ---------- */
  --maxw:1200px;

  /* ---------- typography: families ---------- */
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- typography: scale (4px-rhythm, fluid where it matters) ---------- */
  --fs-xs:11px;
  --fs-sm:12.5px;
  --fs-base:14px;
  --fs-md:15.5px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:clamp(22px, 3vw, 28px);
  --fs-3xl:clamp(28px, 4vw, 40px);
  --fs-4xl:clamp(30px, 4vw, 54px);

  --lh-tight:1.15;
  --lh-normal:1.5;
  --lh-relaxed:1.6;

  --tracking-tight:-0.01em;
  --tracking-wide:0.06em;
  --tracking-wider:0.08em;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---------- spacing scale (4px base unit) ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:88px;
  --space-12:120px;

  /* ---------- radius scale ---------- */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-full:999px;

  /* ---------- border ---------- */
  --border-width:1px;
  --border:var(--border-width) solid var(--line);

  /* ---------- shadow scale (matte, low-opacity — keep the lab feel flat, not glossy) ---------- */
  --shadow-xs:0 2px 6px rgba(18,24,43,0.06);
  --shadow-sm:0 6px 16px rgba(18,24,43,0.08);
  --shadow-md:0 14px 30px rgba(18,24,43,0.09);
  --shadow-lg:0 24px 60px -20px rgba(18,24,43,0.45);
  --shadow-focus:0 0 0 3px rgba(var(--violet-rgb),0.15);

  /* ---------- glass tokens (subtle enhancement only — see identity note above) ---------- */
  --glass-bg:rgba(255,255,255,0.62);
  --glass-bg-dark:rgba(18,24,43,0.55);
  --glass-border:rgba(255,255,255,0.55);
  --glass-blur:14px;
  --glass-blur-lg:20px;
  --glass-shadow:0 15px 35px rgba(18,24,43,0.08);

  /* ---------- motion ---------- */
  --dur-fast:0.15s;
  --dur-base:0.2s;
  --dur-slow:0.4s;
  --dur-slower:0.6s;
  --ease-out:cubic-bezier(.16,.8,.28,1);
  --ease-standard:ease;

  /* ---------- z-index layers ---------- */
  --z-base:1;
  --z-nav:50;
  --z-progress:100;
  --z-back-to-top:60;
  --z-boot:999;
  --z-skip-link:200;
}