/* ============================================================
   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');
}
/* vt-2517-UI: landing-style faces — Clash Display (headlines/brand) + Inter (body).
   Self-hosted woff2 (CSP font-src 'self'), copied from the landing. */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/clash-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fleet/static/fonts/clash-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fleet/static/fonts/clash-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fleet/static/fonts/clash-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fleet/static/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fleet/static/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fleet/static/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fleet/static/fonts/inter-700.woff2') format('woff2');
}

:root {
  /* ─── FONT FAMILIES ──────────────────────────────────────────── */
  --font-display: 'Clash Display', 'Inter', 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', '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
   Indigo accent (vt-1676, was coral) on warm near-black; cream foreground.
   ===================================================================== */
:root,
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Surfaces — ink-navy family, reconciled to the Caldyr landing (cinematic.css).
     vt-2517-UI: unified landing-style dark theme; AA ratios landing-verified. */
  --bg-canvas:    #0a0c14;
  --bg-surface:   #141828;
  --bg-surface-2: #1a1f33;
  --bg-elevated:  #1c2136;

  /* Foreground — cool grays, AA on the surfaces above */
  --fg-primary:   #eef0f8; /* 17.16 / 15.49 / 14.33 : 1 on canvas / surface / surface-2 */
  --fg-secondary: #a9aec8; /*  8.90 /  8.04 /  7.44 : 1 */
  --fg-muted:     #868ba8; /*  5.83 / 5.27 / 4.87 : 1 (>= 4.5 every surface; 4.75 on bg-elevated) */
  /* dark ink on the indigo accent fill — #0a0c14 on #8577f9 = ~5.9:1 (AA) */
  --fg-on-accent: #0a0c14;

  /* Borders (landing) */
  --border-subtle:  #1c2033;
  --border-default: #262b40;
  --border-strong:  #3a4160;

  /* Accent — brand indigo, shared with the landing. base #8577f9 (5.58:1 as text on
     canvas; ~5.9:1 with the dark ink above). accent-active stays #8477f3 rather than
     the landing's #6d5ce0 because dark-ink-on-#6d5ce0 is only ~3.75:1 (< AA); #8477f3
     keeps the pressed state at ~5.7:1. Soft/strong alphas unchanged. */
  --accent:        #8577f9;
  --accent-hover:  #9a8ffb;
  --accent-active: #8477f3;
  --accent-soft:   rgba(133,119,249,0.14);
  --accent-strong: rgba(133,119,249,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 — brand indigo (vt-1676, was #ad4520 coral-on-light). Same hue
     as the dark-theme accent (H246) but darkened to L64% (vs the dark
     theme's L72%) to clear 4.5:1 on white — the same "darken the accent
     for the light surface" move the coral ramp made (#d97757→#ad4520),
     just a smaller HSL step because indigo needs less lightness change
     per unit of contrast gain (see dark-theme accent comment above).
     Hover/active darken further, same direction coral's light ramp used:
       accent   #5a47ff vs #fff  5.56:1 | fg-on-accent (#fff) on it 5.56:1
       hover    #4833ff vs #fff  6.58:1 | fg-on-accent on it        6.58:1
       active   #351fff vs #fff  7.52:1 | fg-on-accent on it        7.52:1 */
  --accent:        #5a47ff;
  --accent-hover:  #4833ff;
  --accent-active: #351fff;
  --accent-soft:   rgba(90,71,255,0.08);
  --accent-strong: rgba(90,71,255,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;
  /* Terminal keeps a dark bg (#2c2820) even in the light theme, so the
     cursor is hardcoded to the dark-theme accent value rather than
     var(--accent) (which would resolve to the light theme's darker,
     white-bg-tuned indigo and be too dim against #2c2820). vt-1676: was
     hardcoded to the dark-theme coral (#d97757) for the same reason. */
  --term-cursor: #8577f9;

  --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;
  /* vt-2517: the off-canvas notifications drawer is translateX'd past the right
     edge when closed; a transformed descendant escapes an ancestor overflow:hidden
     clip and extends document scrollWidth (~12px horizontal scroll) on every
     viewport. Clip the document's horizontal overflow — nothing legitimately
     overflows the page horizontally (wide tables/terminals scroll inside their own
     overflow-x:auto containers), so this forces scrollWidth == clientWidth without
     hiding real content. `clip` (not hidden) avoids creating a scroll container. */
  overflow-x: clip;
}

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;
  }
}