/* ============================================================================
   House tokens. Ported from opes (src/styles/tokens.css), the UI Timo ranks
   first, and extended with the ramp/radius/spacing scale that was implicit
   there. Keep the names: a shared vocabulary is the point.

   Theme is driven by :root[data-theme="light"|"dark"]. Default is light.
   ============================================================================ */

:root[data-theme='light'],
:root {
  --bg: #ffffff;
  --bg-2: #f7f7f8;
  --bg-3: #efeff1;
  --fg: #0a0a0b;
  --fg-2: #52525b;
  --fg-3: #a1a1aa;
  --border: #e4e4e7;
  --border-2: #d4d4d8;
  --accent: #0400d4;
  --accent-fg: #ffffff;
  --accent-soft: rgba(4, 0, 212, 0.06);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.12), 0 8px 16px -4px rgb(0 0 0 / 0.04);
  --topbar-bg: color-mix(in srgb, #ffffff 72%, transparent);

  /* Status. Desaturated on purpose: these sit in chrome, not in charts. */
  --ok: #1a7f5a;
  --warn: #8a6100;
  --bad: #b42318;
  --ok-soft: rgba(26, 127, 90, 0.1);
  --warn-soft: rgba(138, 97, 0, 0.1);
  --bad-soft: rgba(180, 35, 24, 0.1);
}

:root[data-theme='dark'] {
  --bg: #0a0a0b;
  --bg-2: #18181b;
  --bg-3: #27272a;
  --fg: #fafafa;
  --fg-2: #a1a1aa;
  --fg-3: #52525b;
  --border: #27272a;
  --border-2: #3f3f46;
  --accent: #5b58ff;
  --accent-fg: #ffffff;
  --accent-soft: rgba(91, 88, 255, 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 8px 16px -4px rgb(0 0 0 / 0.4);
  --topbar-bg: color-mix(in srgb, #0a0a0b 72%, transparent);

  --ok: #3fb98c;
  --warn: #e0a458;
  --bad: #f0645f;
  --ok-soft: rgba(63, 185, 140, 0.12);
  --warn-soft: rgba(224, 164, 88, 0.12);
  --bad-soft: rgba(240, 100, 95, 0.12);
}

:root {
  /* Type. Load the display face from the project; the stacks degrade cleanly.
     Never ship plain Inter as the display face, that is the slop tell. */
  --font-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-sans);
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Ramp. Tight on purpose: dense reads as an instrument, airy reads as SaaS. */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 19px;
  --t-2xl: 25px;
  --t-3xl: 34px;
  --leading: 1.45;
  --leading-tight: 1.15;
  --track-label: 0.06em;   /* uppercase micro-labels */
  --track-display: -0.02em;

  /* Small radii. Large ones read as consumer product. */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --rail-w: 208px;
  --topbar-h: 52px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}