/*
 * breakaway's design tokens. The rules for using them are in brand/README.md.
 *
 * Carbon (dark) is the default; chalk (light) follows the system setting or data-theme="light" on <html>,
 * and data-theme="dark" keeps carbon. The board imports this file as its tokens (web/src/main.jsx, BRD-28),
 * so what it reads are these names, with breakaway's own among them: --red, --on-red, --carbon,
 * --chalk, --lean, and the display and motion settings.
 *
 * Contrast is checked by test/brand.test.js in both themes: every text color passes 4.5:1 on every
 * background and surface, and status colors also on their own tinted pills.
 */

:root {
  --font-display: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Chivo Mono Variable", "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Display type is Archivo at its widest, heavy and italic: headlines, big numbers, the wordmark. */
  --display-stretch: 125%;
  --display-weight: 850;

  /* breakaway red: the rider off the front. The same in both themes; white text on it is 4.6:1. */
  --red: #e61e0b;
  --on-red: #ffffff;
  --carbon: #0d0e10;
  --chalk: #f4f4f1;

  /* Everything that moves leans like the type: Archivo's italic angle. */
  --lean: 10deg;

  --radius-xs: 4px;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  /* Fast out, no overshoot: breakaway doesn't bounce, so the spring is the same curve. */
  --ease: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-spring: var(--ease);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --topbar-h: 60px;
  --dock-space: 0px;
  --tint: color-mix(in srgb, var(--accent) 12%, var(--surface-2));

  color-scheme: dark;
  --bg: #0d0e10;
  --bg-2: #121316;
  --surface: #17181c;
  --surface-2: #1e2025;
  --surface-3: #282a30;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f1;
  --muted: #a4a7b0;
  --faint: #6e717b;
  --accent: #ff5b3f;
  --on-accent: #0d0e10;
  --invert: #f4f4f1;
  --on-invert: #0d0e10;
  --glass: rgba(16, 17, 20, 0.76);
  --danger: #ff5f7a;
  --danger-bg: rgba(255, 95, 122, 0.12);
  --success: #43d17a;
  --success-bg: rgba(67, 209, 122, 0.12);
  --warn: #ffc23d;
  --warn-bg: rgba(255, 194, 61, 0.11);
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
  --shadow-pop: 0 20px 60px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-strong);
  /* No film grain: breakaway is flat and hard-edged. */
  --grain-opacity: 0;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f4f1;
    --bg-2: #ebebe7;
    --surface: #ffffff;
    --surface-2: #f6f6f3;
    --surface-3: #e6e6e1;
    --line: rgba(13, 14, 16, 0.09);
    --line-strong: rgba(13, 14, 16, 0.18);
    --text: #0d0e10;
    --muted: #54575f;
    --faint: #84878e;
    --accent: #c4180a;
    --on-accent: #ffffff;
    --invert: #0d0e10;
    --on-invert: #f4f4f1;
    --glass: rgba(246, 246, 243, 0.8);
    --danger: #b3123c;
    --danger-bg: rgba(179, 18, 60, 0.09);
    --success: #0b733a;
    --success-bg: rgba(11, 115, 58, 0.1);
    --warn: #865500;
    --warn-bg: rgba(255, 190, 40, 0.2);
    --shadow: 0 24px 48px -28px rgba(13, 14, 16, 0.28), 0 0 0 1px var(--line);
    --shadow-pop: 0 20px 56px -20px rgba(13, 14, 16, 0.3), 0 0 0 1px var(--line-strong);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f1;
  --bg-2: #ebebe7;
  --surface: #ffffff;
  --surface-2: #f6f6f3;
  --surface-3: #e6e6e1;
  --line: rgba(13, 14, 16, 0.09);
  --line-strong: rgba(13, 14, 16, 0.18);
  --text: #0d0e10;
  --muted: #54575f;
  --faint: #84878e;
  --accent: #c4180a;
  --on-accent: #ffffff;
  --invert: #0d0e10;
  --on-invert: #f4f4f1;
  --glass: rgba(246, 246, 243, 0.8);
  --danger: #b3123c;
  --danger-bg: rgba(179, 18, 60, 0.09);
  --success: #0b733a;
  --success-bg: rgba(11, 115, 58, 0.1);
  --warn: #865500;
  --warn-bg: rgba(255, 190, 40, 0.2);
  --shadow: 0 24px 48px -28px rgba(13, 14, 16, 0.28), 0 0 0 1px var(--line);
  --shadow-pop: 0 20px 56px -20px rgba(13, 14, 16, 0.3), 0 0 0 1px var(--line-strong);
}