/* ============================================================
   ASUTLab Design System — Tokens
   v1.0 · derived from Brandbook v1.0
============================================================ */

:root{
  /* ---------- COLOR · raw palette ---------- */
  --c-graphite-900:#0F141D;
  --c-graphite-800:#1B2230;   /* primary surface dark · brand graphite */
  --c-graphite-700:#2A3243;
  --c-steel-600:#3A4255;
  --c-steel-500:#5A6376;
  --c-mist-400:#8C93A4;
  --c-mist-300:#C9CCD3;
  --c-mist-200:#DEE0E5;
  --c-rule-150:#E4E2DD;
  --c-paper-100:#F2EFEA;       /* primary surface light · brand paper */
  --c-paper-50:#F8F6F2;
  --c-white:#FFFFFF;

  --c-signal-700:#9C3F0E;
  --c-signal-600:#C9551A;
  --c-signal-500:#EE6A1F;      /* brand accent · signal */
  --c-signal-400:#F38A4C;
  --c-signal-100:#FBE2D2;
  --c-signal-50:#FDF1E8;

  --c-ok-600:#2F6E54;
  --c-ok-500:#3D8B6B;
  --c-ok-100:#E4F1EB;
  --c-warn-600:#A1740E;
  --c-warn-500:#C99318;
  --c-warn-100:#F6ECD0;
  --c-bad-600:#8E3520;
  --c-bad-500:#B2462C;
  --c-bad-100:#F1DDD4;
  --c-info-500:#3F6FB2;
  --c-info-100:#DBE5F2;

  /* ---------- COLOR · semantic (light theme) ---------- */
  --bg-canvas:        var(--c-paper-100);
  --bg-surface:       var(--c-white);
  --bg-sunken:        var(--c-paper-50);
  --bg-inverse:       var(--c-graphite-800);
  --bg-inverse-2:     var(--c-graphite-700);

  --fg-primary:       var(--c-graphite-800);
  --fg-secondary:     var(--c-steel-600);
  --fg-muted:         var(--c-mist-400);
  --fg-inverse:       var(--c-paper-100);
  --fg-inverse-muted: var(--c-mist-300);
  --fg-accent:        var(--c-signal-500);

  --border-subtle:    var(--c-rule-150);
  --border-default:   var(--c-mist-200);
  --border-strong:    var(--c-steel-600);
  --border-accent:    var(--c-signal-500);

  --status-ok:        var(--c-ok-500);
  --status-ok-bg:     var(--c-ok-100);
  --status-warn:      var(--c-warn-500);
  --status-warn-bg:   var(--c-warn-100);
  --status-bad:       var(--c-bad-500);
  --status-bad-bg:    var(--c-bad-100);
  --status-info:      var(--c-info-500);
  --status-info-bg:   var(--c-info-100);

  /* ---------- TYPE ---------- */
  --font-display:"Manrope", "Inter", system-ui, sans-serif;
  --font-text:"Inter", "Manrope", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* product type scale — designed for dashboards at 14–16px base */
  --t-display:   56px;
  --t-h1:        36px;
  --t-h2:        28px;
  --t-h3:        20px;
  --t-body-lg:   16px;
  --t-body:      14px;
  --t-caption:   13px;
  --t-mono:      12px;     /* labels, metadata */
  --t-num-xl:    48px;     /* KPI giant */
  --t-num-lg:    32px;     /* KPI medium */

  --lh-tight:1.1;
  --lh-snug:1.25;
  --lh-normal:1.45;
  --lh-relaxed:1.6;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-mono:0.08em;

  /* ---------- SPACE · 8px base ---------- */
  --space-0: 0;
  --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;
  --space-24:96px;

  /* ---------- RADIUS · minimal, engineering-feel ---------- */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---------- BORDER ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- ELEVATION · subtle ink-print shadows ---------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(27,34,48,.06);
  --elev-2: 0 4px 10px -4px rgba(27,34,48,.10), 0 1px 2px rgba(27,34,48,.04);
  --elev-3: 0 12px 28px -12px rgba(27,34,48,.18), 0 2px 6px rgba(27,34,48,.05);
  --elev-overlay: 0 24px 60px -20px rgba(27,34,48,.30);

  /* ---------- MOTION ---------- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.0,.2,1);

  /* ---------- LAYOUT ---------- */
  --layout-max:   1440px;
  --sidebar-w:    260px;
  --topbar-h:     56px;
  --grid-gap:     16px;
  --grid-cols:    12;
}

/* dark theme overrides */
[data-theme="dark"]{
  --bg-canvas:        var(--c-graphite-900);
  --bg-surface:       var(--c-graphite-800);
  --bg-sunken:        var(--c-graphite-700);
  --bg-inverse:       var(--c-paper-100);
  --bg-inverse-2:     var(--c-paper-50);

  --fg-primary:       var(--c-paper-100);
  --fg-secondary:     var(--c-mist-300);
  --fg-muted:         var(--c-mist-400);
  --fg-inverse:       var(--c-graphite-800);
  --fg-inverse-muted: var(--c-steel-500);

  --border-subtle:    rgba(255,255,255,.08);
  --border-default:   rgba(255,255,255,.14);
  --border-strong:    var(--c-mist-300);

  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 4px 12px -4px rgba(0,0,0,.5);
  --elev-3: 0 14px 32px -12px rgba(0,0,0,.6);
}