/* ============================================================
   Marrsai — Design Tokens (v1.0)
   Trustworthy · Modern · Confident · Quietly powerful
   Light theme · Adaptive density · Operator-first
   Two directions: [data-direction="warm"] (default) and [data-direction="cool"]
   Accent anchored to #463668 — a deep violet — at --accent-700.
   ============================================================ */

:root,
:root[data-direction="warm"] {
  --hue-paper: 80; /* @kind other */   /* warm cream — pairs with violet */
  --hue-accent: 295; /* @kind other */ /* deep violet (anchor #463668) */
  --hue-data2: 70; /* @kind other */  /* ochre — complementary warm */
}
:root[data-direction="cool"] {
  --hue-paper: 285; /* @kind other */  /* cool violet-grey */
  --hue-accent: 280; /* @kind other */ /* blue-violet */
  --hue-data2: 25; /* @kind other */  /* warm rose — contrast */
}

:root {
  /* ---------- Color: Neutrals (warm or cool depending on direction) ---------- */
  --paper-50:  oklch(99% 0.004 var(--hue-paper));
  --paper-100: oklch(97.5% 0.005 var(--hue-paper));
  --paper-200: oklch(95% 0.006 var(--hue-paper));
  --paper-300: oklch(91% 0.008 var(--hue-paper));
  --line-100: oklch(93.5% 0.006 var(--hue-paper));
  --line-200: oklch(89% 0.008 var(--hue-paper));

  --ink-100: oklch(72% 0.012 var(--hue-paper));
  --ink-200: oklch(56% 0.014 var(--hue-paper));
  --ink-400: oklch(38% 0.014 var(--hue-paper));
  --ink-600: oklch(24% 0.012 var(--hue-paper));
  --ink-800: oklch(16% 0.010 var(--hue-paper));

  /* ---------- Color: Primary accent (violet — anchor #463668 at -700) ---------- */
  --accent-50:  oklch(96% 0.028 var(--hue-accent));
  --accent-100: oklch(90% 0.050 var(--hue-accent));
  --accent-200: oklch(78% 0.080 var(--hue-accent));
  --accent-500: oklch(48% 0.110 var(--hue-accent));
  --accent-600: oklch(40% 0.100 var(--hue-accent));
  --accent-700: oklch(33% 0.090 var(--hue-accent));

  /* ---------- Color: Secondary (editorial / data-2) ---------- */
  --ochre-100: oklch(94% 0.035 var(--hue-data2));
  --ochre-500: oklch(62% 0.090 var(--hue-data2));
  --ochre-700: oklch(48% 0.085 var(--hue-data2));

  /* ---------- Color: Status (matched chroma/lightness) ---------- */
  --status-critical-50:  oklch(95% 0.025 25);
  --status-critical-500: oklch(55% 0.140 25);
  --status-critical-700: oklch(42% 0.130 25);

  --status-high-50:  oklch(95% 0.030 50);
  --status-high-500: oklch(62% 0.130 50);

  --status-medium-50:  oklch(96% 0.035 85);
  --status-medium-500: oklch(70% 0.120 85);

  --status-low-50:  oklch(96% 0.030 145);
  --status-low-500: oklch(58% 0.090 145);

  --status-ok-50:  oklch(95% 0.025 155);
  --status-ok-500: oklch(52% 0.090 155);

  --status-info-50:  oklch(96% 0.025 235);
  --status-info-500: oklch(55% 0.090 235);

  /* ---------- Type ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* DEPRECATED — Instrument Serif is retired. --font-serif is kept only so
     MARRS-era files don't fall back to Georgia; it now resolves to the
     display sans. Migrate call sites to --font-display. */
  --font-serif: var(--font-display);

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  40px;
  --text-5xl:  56px;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.5;
  --leading-loose: 1.65;

  --tracking-tight: -0.015em;
  --tracking-base:  -0.005em;
  --tracking-mono:  0.01em;
  --tracking-caps:  0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-xs: 3px;   /* tags, dots */
  --radius-sm: 6px;   /* inputs, buttons */
  --radius-md: 10px;  /* cards */
  --radius-lg: 14px;  /* feature surfaces */
  --radius-pill: 999px;

  /* ---------- Elevation (restrained) ---------- */
  --shadow-xs: 0 1px 0 oklch(0% 0 0 / 0.04);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 0 oklch(0% 0 0 / 0.02);
  --shadow-md: 0 4px 12px -4px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.03);
  --shadow-lg: 0 12px 32px -8px oklch(0% 0 0 / 0.10), 0 2px 6px oklch(0% 0 0 / 0.04);
  --shadow-panel: -16px 0 48px -16px oklch(0% 0 0 / 0.10);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ---------- Base reset ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-600);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: var(--tracking-base);
}

/* ---------- Reusable utility classes ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-200);
  font-weight: 500;
}
.display { font-family: var(--font-display); letter-spacing: -0.01em; }
.serif { font-family: var(--font-display); letter-spacing: -0.01em; } /* DEPRECATED alias */
.mono  { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

.tabnum { font-variant-numeric: tabular-nums; }