/* ARA-HUNTER Dashboard V2 — design tokens (V2 §17).
   One scale for spacing / type / radius / border / elevation / state
   colour. Dark-first (V2 §3.1); a [data-theme="light"] override keeps
   the toggle honest. Built from the Cockpit D5 foundation, tuned to the
   approved V2 concept (dark navy ground, teal/green emphasis). */

:root {
  /* ---- palette: dark (default) ---- */
  --bg:            #0a0e17;   /* app ground */
  --bg-elev:       #0e1420;   /* raised areas (top bar, side nav) */
  --surface:       #131b29;   /* card */
  --surface-2:     #182234;   /* nested / hover card */
  --surface-3:     #1e2b40;   /* input, active chip */
  --border:        #24324a;
  --border-strong: #33455f;

  --text:          #eef2f8;
  --text-muted:    #9fb0c4;
  --text-faint:    #6b7d95;
  --text-invert:   #0a0e17;

  --accent:        #2dd4a7;   /* teal-green — primary emphasis */
  --accent-hover:  #38e6b7;
  --accent-bg:     #123028;
  --accent-border: #1f5a4a;

  --good:          #34d399;
  --good-bg:       #10281f;
  --good-border:   #1e5540;
  --warn:          #fbbf24;
  --warn-bg:       #2a2411;
  --warn-border:   #6b5518;
  --crit:          #f87171;
  --crit-bg:       #2a1414;
  --crit-border:   #6e2b2b;
  --info:          #60a5fa;
  --info-bg:       #12233d;
  --info-border:   #2b4d80;
  --neutral:       #8aa0b8;
  --neutral-bg:    #1a2234;
  --neutral-border:#2b3a54;

  --up:            var(--good);
  --down:          var(--crit);
  --flat:          var(--text-faint);

  /* ---- typography ---- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-22: 22px;  --fs-28: 28px;  --fs-34: 34px;

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
  --lh-tight: 1.2;    --lh-normal: 1.45;

  /* ---- spacing scale (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

  /* ---- radius ---- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;

  /* ---- elevation (restrained — V2 §3.1) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 4px 16px rgba(0,0,0,.35);

  /* ---- layout metrics ---- */
  --topbar-h: 52px;          /* desktop brand bar; mobile overrides to 56 */
  --sidenav-w: 232px;
  --sidenav-w-collapsed: 64px;
  --bottomnav-h: 60px;
  --content-max: 1520px;

  --transition: 140ms ease;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:            #f3f5f9;
  --bg-elev:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f6f8fb;
  --surface-3:     #eef2f7;
  --border:        #dde3ec;
  --border-strong: #c4cede;

  --text:          #131b29;
  --text-muted:    #4a5a70;
  --text-faint:    #7c8ba0;
  --text-invert:   #ffffff;

  --accent:        #0d9e7c;
  --accent-hover:  #0b8a6c;
  --accent-bg:     #e2f6f0;
  --accent-border: #a8e0d1;

  --good:          #0f9d63;   --good-bg:  #e4f7ee;   --good-border:  #a7e2c6;
  --warn:          #b7791f;   --warn-bg:  #fdf3dd;   --warn-border:  #ecd39a;
  --crit:          #d64545;   --crit-bg:  #fbe5e5;   --crit-border:  #eeb4b4;
  --info:          #2563eb;   --info-bg:  #e5edfd;   --info-border:  #b3c9f5;
  --neutral:       #64748b;   --neutral-bg:#eef1f5;  --neutral-border:#cdd5e0;

  --shadow-1: 0 1px 2px rgba(20,30,50,.08);
  --shadow-2: 0 6px 20px rgba(20,30,50,.10);
  color-scheme: light;
}