/* b1t design tokens. Source of truth: brand/tokens.css. Copies in site/ and design/ are generated by `bun run sync`. */

:root {
  /* Color primitives. The palette is deliberately small: a dark field, one signal color, a paper white. */
  --void: #0a0a0c;
  --ink: #131316;
  --ink-2: #1b1b20;
  --line: #27272e;
  --line-strong: #5e5e6a; /* 3:1 on void, the floor for control edges */
  --dim: #7a7a86; /* 4.5:1 on void, so even tertiary text reads */
  --mute: #8b8b97;
  --paper: #f3f2ed;
  --paper-2: #ffffff;
  --sand: #e2e0d8;
  --signal: #ff5a1f;
  --signal-hot: #ff7a47;
  --signal-deep: #bf3806;
  --ok: #3ecf8e;
  --warn: #f5b83d;
  --err: #ff5c5c;

  /* Semantic roles, dark theme (default). Light theme overrides below. */
  --bg: var(--void);
  --surface: var(--ink);
  --surface-2: var(--ink-2);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --fg: var(--paper);
  --fg-2: var(--mute);
  --fg-3: var(--dim);
  --accent: var(--signal);
  --accent-hover: var(--signal-hot);
  --accent-fg: var(--void); /* text on an accent surface */
  --accent-text: var(--signal); /* accent used as text; needs 4.5:1 on --bg */
  --accent-tint: rgb(255 90 31 / 0.14);
  --selection: rgb(255 90 31 / 0.35);
  --focus: var(--signal);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;
  --fs-display: clamp(2.5rem, 1rem + 5.5vw, 6rem);
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.65;
  --track-tight: -0.03em;
  --track-snug: -0.015em;
  --track-normal: 0;
  --track-wide: 0.04em;
  --measure: 68ch;

  /* Space, 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Shape */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r-full: 999px;
  --border-w: 1px;

  /* Depth: shadows carry offset and blur, never a flat halo */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --shadow-accent: 0 8px 24px -8px rgb(255 90 31 / 0.55);

  /* Motion: exponential ease-out from a visible default */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-4: 900ms;

  /* Layout */
  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: #f7f6f1;
  --border: var(--sand);
  --border-strong: #8a877d; /* 3:1 on paper */
  --fg: var(--void);
  --fg-2: #62626c;
  --fg-3: #6c6c76;
  /* Status colors darken on paper to keep 4.5:1 as text */
  --ok: #0f7a4a;
  --warn: #8a5a00;
  --err: #c81e1e;
  --accent: var(--signal);
  --accent-hover: var(--signal-deep);
  --accent-fg: var(--void);
  --accent-text: var(--signal-deep);
  --accent-tint: rgb(255 90 31 / 0.12);
  --selection: rgb(255 90 31 / 0.3);
  --shadow-1: 0 1px 2px rgb(10 10 12 / 0.08), 0 8px 24px -8px rgb(10 10 12 / 0.16);
  --shadow-2: 0 2px 4px rgb(10 10 12 / 0.08), 0 24px 48px -12px rgb(10 10 12 / 0.22);
  color-scheme: light;
}

/* Base: the browser surfaces belong to the brand too */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--border-strong) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-md) / var(--lh-normal) var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  accent-color: var(--accent);
}

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r1);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--bg);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-track {
  background: transparent;
}

a {
  color: inherit;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

a:hover {
  text-decoration-color: var(--accent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

h2 {
  font-size: var(--fs-3xl);
  letter-spacing: var(--track-tight);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

small,
.text-sm {
  font-size: var(--fs-sm);
}

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: "tnum", "zero";
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

/* Authored display values must never resurrect a hidden element */
[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

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