/* ═══════════════════════════════════════════════════════════════════════════
   MODEL TALK · DESIGN TOKENS
   Single source of truth for the app (app/globals.css imports this) and the
   marketing site (site/tokens.css is a copy made by scripts/sync-tokens.mjs).
   Themes override only the --mt-color-* group at runtime (lib/themes.ts).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color · OBSIDIAN (default theme) ─────────────────────────────────── */
  --mt-color-void:     #05070c;   /* page ground */
  --mt-color-deck:     #0a0e16;   /* recessed surfaces: inputs, transcript bubbles */
  --mt-color-panel:    #0e1420;   /* raised surfaces: cards, drawers, HUD */
  --mt-color-edge:     #1b2436;   /* 1px hairlines */
  --mt-color-edge-hot: #2b3a55;   /* hover / focus hairlines */
  --mt-color-ink:      #e8eef7;   /* primary text */
  --mt-color-dim:      #9aa7ba;   /* secondary text  (was #7c8ba3 — lifted for legibility) */
  --mt-color-faint:    #5c6a82;   /* labels, tertiary (was #47536a — lifted for legibility) */
  --mt-color-accent:   #ffb020;   /* the operator: CTAs, held state, wordmark */
  --mt-color-hazard:   #ff4d3d;   /* destructive, bluff, over-budget */
  --mt-color-good:     #3fe0a8;   /* thought tap, healthy, connected */
  --mt-plate-a:        #0d1421;   /* plate gradient start */
  --mt-plate-b:        #080c14;   /* plate gradient end */
  --mt-grid-line:      rgba(120,150,200,0.045);
  --mt-scan-alpha:     0.6;

  /* Side identity is NOT themed: a model's provider colour is constant everywhere. */
  --mt-side-anthropic: #d97757;
  --mt-side-openai:    #3fe0a8;
  --mt-side-google:    #5b9dff;
  --mt-side-xai:       #c9cfd6;
  --mt-side-compat:    #b58cff;
  --mt-side-sim:       #8c97aa;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --mt-font-mark:    "Michroma", system-ui, sans-serif;          /* wordmark ONLY */
  --mt-font-ui:      "Oxanium", system-ui, sans-serif;           /* labels, buttons, callsigns, numerals in HUD */
  --mt-font-body:    "Sora", system-ui, sans-serif;              /* everything you read */
  --mt-font-mono:    "JetBrains Mono", ui-monospace, monospace;  /* tokens, dollars, taps, ids */

  /* scale · 1.2 ratio, 15px base */
  --mt-text-xs:   12px;   /* labels, meta — the floor; nothing smaller */
  --mt-text-sm:   13px;   /* dense secondary copy, table cells */
  --mt-text-base: 15px;   /* body, transcript */
  --mt-text-md:   17px;   /* leads */
  --mt-text-lg:   21px;   /* card titles, callsigns */
  --mt-text-xl:   28px;   /* section titles */
  --mt-text-2xl:  36px;   /* page titles */
  --mt-text-3xl:  52px;   /* hero */

  --mt-leading-tight: 1.15;
  --mt-leading-snug:  1.35;
  --mt-leading-body:  1.6;

  --mt-tracking-label: 0.14em;   /* uppercase labels (was .22em — too airy at 10px) */
  --mt-tracking-ui:    0.06em;   /* Oxanium buttons / callsigns */
  --mt-tracking-tight: -0.01em;  /* large display sizes */

  --mt-measure: 65ch;

  /* ── Space · 8px base ─────────────────────────────────────────────────── */
  --mt-space-1:  4px;
  --mt-space-2:  8px;
  --mt-space-3:  12px;
  --mt-space-4:  16px;
  --mt-space-5:  24px;
  --mt-space-6:  32px;
  --mt-space-7:  48px;
  --mt-space-8:  64px;
  --mt-space-9:  96px;

  --mt-gutter:     32px;
  --mt-max-width:  1180px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --mt-radius-sm: 2px;    /* everything by default */
  --mt-radius-md: 4px;    /* inputs, small controls */
  --mt-bevel:     12px;   /* the chamfer on plates that earn it: CTA, interceptor, fighter cards */
  --mt-border:    1px solid var(--mt-color-edge);

  /* ── Effects ──────────────────────────────────────────────────────────── */
  --mt-glow-accent: 0 0 48px -14px var(--mt-color-accent);
  --mt-glow-good:   0 0 40px -16px var(--mt-color-good);
  --mt-shadow-lift: 0 24px 48px -32px #000;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --mt-dur-fast:  150ms;   /* hover, focus */
  --mt-dur-base:  300ms;   /* reveals, theme swap */
  --mt-dur-slow:  600ms;   /* the interceptor arriving / leaving — the one hero animation */
  --mt-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --mt-ease-in:   cubic-bezier(.7, 0, .84, 0);

  color-scheme: dark;
}

/* ═══ Shared primitives · identical in app and site ═══════════════════════ */

.mt-label {
  font-family: var(--mt-font-ui);
  font-size: var(--mt-text-xs);
  font-weight: 600;
  letter-spacing: var(--mt-tracking-label);
  text-transform: uppercase;
  color: var(--mt-color-faint);
  line-height: var(--mt-leading-snug);
}
.mt-num  { font-family: var(--mt-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mt-ui   { font-family: var(--mt-font-ui); letter-spacing: var(--mt-tracking-ui); }
.mt-mark { font-family: var(--mt-font-mark); letter-spacing: 0.04em; }

.mt-hair  { border: var(--mt-border); border-radius: var(--mt-radius-sm); }
.mt-plate { background: linear-gradient(160deg, var(--mt-plate-a) 0%, var(--mt-plate-b) 100%); }
.mt-bevel { clip-path: polygon(var(--mt-bevel) 0, 100% 0, 100% calc(100% - var(--mt-bevel)), calc(100% - var(--mt-bevel)) 100%, 0 100%, 0 var(--mt-bevel)); }

.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mt-space-2);
  font-family: var(--mt-font-ui); font-weight: 800; font-size: var(--mt-text-sm);
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 0 var(--mt-space-5); height: 44px;
  background: var(--mt-color-accent); color: var(--mt-color-void);
  border: 1px solid var(--mt-color-accent); border-radius: var(--mt-radius-sm);
  box-shadow: var(--mt-glow-accent);
  transition: filter var(--mt-dur-fast), border-color var(--mt-dur-fast), color var(--mt-dur-fast);
  cursor: pointer;
}
.mt-btn:hover { filter: brightness(1.08); }
.mt-btn.ghost { background: transparent; color: var(--mt-color-ink); border-color: var(--mt-color-edge-hot); box-shadow: none; }
.mt-btn.ghost:hover { border-color: var(--mt-color-accent); color: var(--mt-color-accent); filter: none; }
.mt-btn.danger { background: rgba(255,77,61,.12); color: var(--mt-color-hazard); border-color: rgba(255,77,61,.5); box-shadow: none; }

:focus-visible { outline: 2px solid var(--mt-color-accent); outline-offset: 2px; }

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