/* ============================================================
   Synaptyx — Design Tokens (Part 0)
   ============================================================
   Foundation file. Every component CSS reads from these vars.
   No raw hex / px values outside this file.

   Fonts are self-hosted (CSP-safe; no fonts.googleapis.com /
   fonts.gstatic.com). WOFF2 files live under agent-fleet/web/fonts/
   and are served via /fleet/static/fonts/*.woff2 — under the static
   allowlist (not auth-gated). Satisfies production CSP
   `default-src 'self'; font-src 'self' data:`. (vt-0957)
   ============================================================ */

/* ─── SELF-HOSTED FONTS (OFL: Geist/Geist Mono © Vercel, Instrument Serif) ─── */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fleet/static/fonts/geist-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/instrument-serif-400-italic.woff2') format('woff2');
}

:root {
  /* ─── FONT FAMILIES ──────────────────────────────────────────── */
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
  --font-serif:   'Instrument Serif', 'New York', Georgia, serif;  /* opt-in for editorial moments */

  /* ─── TYPE SCALE ─────────────────────────────────────────────── */
  --fz-display:  clamp(2.5rem, 5vw, 4rem);      /* hero, page title */
  --fz-h1:       1.75rem;
  --fz-h2:       1.375rem;
  --fz-h3:       1.125rem;
  --fz-body:     0.9375rem;                     /* 15px */
  --fz-meta:     0.8125rem;                     /* 13px */
  --fz-mono-sm:  0.8125rem;
  --fz-mono-md:  0.9375rem;

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.5;

  --tr-display:    -0.022em;
  --tr-body:       0;
  --tr-meta-upper: 0.08em;

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

  /* ─── SPACING (4px base) ─────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ─── RADII ──────────────────────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;     /* default for cards / buttons */
  --radius-4: 12px;    /* modals */
  --radius-5: 16px;
  --radius-pill: 9999px;

  /* ─── MOTION ─────────────────────────────────────────────────── */
  --dur-hover:    100ms;
  --dur-focus:    150ms;
  --dur-toast:    200ms;
  --dur-modal:    180ms;
  --dur-drawer:   240ms;
  --dur-tab:      120ms;
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph:    cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── ELEVATION (shadow) ─────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.20), 0 1px 1px rgba(0,0,0,.12);
  --shadow-2: 0 4px 12px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.18);
  --shadow-3: 0 12px 32px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.20);

  /* Focus ring — same in both themes */
  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent);
}

/* =====================================================================
   DARK THEME (default) — warm "Claude" palette
   Coral accent on warm near-black; cream foreground.
   ===================================================================== */
:root,
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Surfaces — warm browns, not cold blue-grays */
  --bg-canvas:    #16130f;
  --bg-surface:   #1d1a15;
  --bg-surface-2: #25211b;
  --bg-elevated:  #2c2820;

  /* Foreground — warm cream */
  --fg-primary:   #ece5d4;
  --fg-secondary: #b8b0a0;
  /* vt-1249: was #7a7468 — only 3.73:1 on --bg-surface (#1d1a15), failed WCAG
     AA 4.5:1 (axe color-contrast on the sidebar group labels + other muted
     text). #999182 → 5.56:1 on --bg-surface and 4.70:1 on --bg-elevated
     (#2c2820, the lightest dark surface muted text sits on). Light theme keeps
     its own --fg-muted override (#8a8472) below. */
  --fg-muted:     #999182;
  /* Dark text on coral — Claude coral fails 4.5:1 with white,
     so on-accent foreground is a deep warm brown instead. */
  --fg-on-accent: #1f1c17;

  /* Borders */
  --border-subtle:  #25211b;
  --border-default: #36312a;
  --border-strong:  #4d4639;

  /* Accent — Claude coral */
  --accent:        #d97757;
  --accent-hover:  #e08a6e;
  --accent-active: #c46648;
  --accent-soft:   rgba(217,119,87,0.14);
  --accent-strong: rgba(217,119,87,0.24);

  /* Semantic — warmed slightly to fit the palette */
  --success:       #8fbf6e;
  --success-soft:  rgba(143,191,110,0.14);
  --warning:       #e6b260;
  --warning-soft:  rgba(230,178,96,0.14);
  --danger:        #e5736b;
  --danger-soft:   rgba(229,115,107,0.14);
  --info:          #7eb3d9;
  --info-soft:     rgba(126,179,217,0.14);

  /* Terminal */
  --term-bg:     #100d09;
  --term-fg:     #d4ccb9;
  --term-cursor: var(--accent);

  /* Tier ranks */
  --tier-community:  #7a7468;
  --tier-team:       var(--accent);
  --tier-enterprise: #b888d4;
}

/* =====================================================================
   LIGHT THEME — warm cream / "Claude.ai notebook" feel
   ===================================================================== */
:root[data-theme="light"],
[data-theme="light"] {
  --bg-canvas:    #faf7f1;
  --bg-surface:   #ffffff;
  --bg-surface-2: #f1ece1;
  --bg-elevated:  #ffffff;

  --fg-primary:   #1f1c17;
  --fg-secondary: #4f4a3f;
  /* vt-1249: was #8a8472 — only 3.73:1 on white / 3.49:1 on --bg-canvas
     (#faf7f1), failed WCAG AA 4.5:1 (axe color-contrast on muted text in the
     light theme). #6e6a5b → 5.42:1 on white, 5.07:1 on --bg-canvas. */
  --fg-muted:     #6e6a5b;
  --fg-on-accent: #ffffff;

  --border-subtle:  #ece6d6;
  --border-default: #d8d1bd;
  --border-strong:  #aaa392;

  --accent:        #ad4520;
  --accent-hover:  #963c1c;
  --accent-active: #7d3217;
  --accent-soft:   rgba(173,69,32,0.08);
  --accent-strong: rgba(173,69,32,0.18);

  --success:       #3f7530;
  --success-soft:  rgba(63,117,48,0.08);
  --warning:       #8a5e10;
  --warning-soft:  rgba(138,94,16,0.08);
  --danger:        #b53d35;
  --danger-soft:   rgba(181,61,53,0.08);
  --info:          #2872a4;
  --info-soft:     rgba(40,114,164,0.08);

  --term-bg:     #2c2820;
  --term-fg:     #e8e1cf;
  --term-cursor: #d97757;

  --tier-community:  #8a8472;
  --tier-team:       var(--accent);
  --tier-enterprise: #8458a3;

  --shadow-1: 0 1px 2px rgba(80,60,30,.08), 0 1px 1px rgba(80,60,30,.04);
  --shadow-2: 0 4px 12px rgba(80,60,30,.10), 0 1px 2px rgba(80,60,30,.05);
  --shadow-3: 0 12px 32px rgba(80,60,30,.14), 0 4px 8px rgba(80,60,30,.07);
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

table, .num, [data-numeric] {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--accent-strong);
  color: var(--fg-primary);
}

/* Editorial serif accent — opt-in via .sx-serif or font-family: var(--font-serif) */
.sx-serif { font-family: var(--font-serif); font-style: italic; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-canvas); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-1);
  border: 2px solid var(--bg-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}