/* Zeus AI design tokens (Sprint 7b). The ONLY place raw colors, sizes and fonts are defined: every other
   stylesheet uses var(--...). Light theme only (decision D3); semantic names (--surface, --text, --accent...)
   mean a dark set could be added later by redefining them, without touching a component.
   Contrast of every text/background pair is checked by scripts/check_contrast.mjs. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- raw palette ---- */
  --n-0: #ffffff;  --n-25: #f8f9fc;  --n-50: #f2f4f9;  --n-100: #e8ebf3;  --n-200: #d9deea;  --n-300: #c0c7d9;
  --n-400: #8f97b0;  --n-500: #646c87;  --n-600: #4a5169;  --n-700: #363c52;  --n-800: #232842;  --n-900: #141829;
  --brand-50: #eef0ff;  --brand-100: #e0e4ff;  --brand-200: #c5ccff;  --brand-500: #5b5bf0;  --brand-600: #4a47e0;  --brand-700: #3c39c2;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --green-50: #e8f7ef;  --green-600: #0b7a42;
  --amber-50: #fff4de;  --amber-600: #9a5b00;
  --red-50: #fdecec;    --red-600: #c4281c;
  --blue-50: #e8f1ff;   --blue-600: #1856c4;
  --ink-900: #0d1226;   --ink-800: #151b36;   --ink-700: #1e2646;   --ink-300: #9aa3c4;   --ink-100: #dfe3f5;

  /* ---- semantic ---- */
  --canvas: var(--n-25);          /* page background */
  --surface: var(--n-0);          /* cards, panels, inputs */
  --surface-2: var(--n-50);       /* subtle fills: table header, hover */
  --line: var(--n-100);           /* borders */
  --line-strong: var(--n-200);
  --text: var(--n-900);
  --text-2: var(--n-600);         /* secondary text */
  --text-3: var(--n-500);         /* hints; still AA on surface */
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-50);
  --on-accent: #ffffff;
  --good: var(--green-600);   --good-soft: var(--green-50);
  --warn: var(--amber-600);   --warn-soft: var(--amber-50);
  --danger: var(--red-600);   --danger-soft: var(--red-50);
  --info: var(--blue-600);    --info-soft: var(--blue-50);
  --sidebar-bg: var(--ink-900);  --sidebar-hover: var(--ink-800);  --sidebar-active: var(--ink-700);
  --sidebar-text: var(--ink-300);  --sidebar-text-active: #ffffff;  --sidebar-accent: #8b8bff;

  /* ---- legacy names (inline styles and old markup still use these; removed when S7e finishes migrating) ---- */
  --bg: var(--canvas);  --panel: var(--surface);  --border: var(--line);  --sub: var(--text-2);

  /* ---- type ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 22px;  --fs-3xl: 28px;
  --lh-tight: 1.25;  --lh-base: 1.5;

  /* ---- space, shape, depth ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;
  --sh-xs: 0 1px 2px rgba(20, 24, 41, .06);
  --sh-sm: 0 1px 3px rgba(20, 24, 41, .08), 0 1px 2px rgba(20, 24, 41, .05);
  --sh-md: 0 6px 16px rgba(20, 24, 41, .10), 0 2px 4px rgba(20, 24, 41, .05);
  --sh-lg: 0 18px 44px rgba(20, 24, 41, .18), 0 4px 10px rgba(20, 24, 41, .08);
  --ring: 0 0 0 3px rgba(91, 91, 240, .35);

  /* ---- layout ---- */
  --sidebar-w: 248px;  --sidebar-w-collapsed: 72px;  --topbar-h: 60px;  --content-max: 1440px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);  --dur: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}