/* Silverbox design tokens, as CSS custom properties.
   The source is the Silverbox design system (the Claude Design site mockup); keep the two in step.
   Dark is the base theme. Light follows prefers-color-scheme, or data-theme on <html>. */

:root {
  color-scheme: dark;

  --ground: #14100b;
  --glow: rgba(255, 176, 0, 0.10);
  --scanline: rgba(0, 0, 0, 0.32);
  --vignette: rgba(0, 0, 0, 0.55);
  --page: #1b1a19;
  --surface: #2a2928;
  --line: rgba(255, 255, 255, 0.09);
  --chip: rgba(255, 255, 255, 0.06);
  --ink: #dfdede;
  --ink-2: #b2b0ad;
  --ink-3: #999898;
  --phosphor: #ffb000;
  --phosphor-glow: rgba(255, 176, 0, 0.45);
  --crt-ink: #ffb000;
  --action: #eab74a;
  --action-hover: #f2c35c;
  --on-action: #1a1404;
  --action-edge: #eab74a;
  --link: #eab74a;
  --ready: #71c16e;
  --shadow-shot: 0 50px 120px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.10);
  --shadow-icon: 0 18px 36px rgba(0, 0, 0, 0.50);
  --backdrop: rgba(10, 8, 5, 0.86);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 96px;
  --space-10: 140px;

  --radius-mark: 2px;
  --radius-chip: 8px;
  --radius-tile: 12px;
  --radius-shot: 14px;
  --radius-card: 14px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --container: 1200px;
  --container-shot: 1160px;
  --container-text: 680px;

  --font-display: VT323, ui-monospace, Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #e6dccb;
    --glow: rgba(255, 255, 255, 0.60);
    --scanline: rgba(90, 66, 30, 0.07);
    --vignette: rgba(90, 66, 30, 0.10);
    --page: #f7f5f1;
    --surface: #ffffff;
    --line: rgba(60, 45, 20, 0.12);
    --chip: rgba(60, 45, 20, 0.06);
    --ink: #262626;
    --ink-2: #5c5f67;
    --ink-3: #6d6e71;
    --phosphor: #85590a;
    --phosphor-glow: rgba(133, 89, 10, 0);
    --crt-ink: #262626;
    --action: #b8841c;
    --action-hover: #c8932a;
    --on-action: #1a1404;
    --action-edge: #85590a;
    --link: #85590a;
    --ready: #39783c;
    --shadow-shot: 0 40px 100px rgba(70, 50, 20, 0.22), 0 0 0 1px rgba(60, 45, 20, 0.12);
    --shadow-icon: 0 16px 32px rgba(70, 50, 20, 0.28);
    --backdrop: rgba(60, 45, 20, 0.72);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #e6dccb;
  --glow: rgba(255, 255, 255, 0.60);
  --scanline: rgba(90, 66, 30, 0.07);
  --vignette: rgba(90, 66, 30, 0.10);
  --page: #f7f5f1;
  --surface: #ffffff;
  --line: rgba(60, 45, 20, 0.12);
  --chip: rgba(60, 45, 20, 0.06);
  --ink: #262626;
  --ink-2: #5c5f67;
  --ink-3: #6d6e71;
  --phosphor: #85590a;
  --phosphor-glow: rgba(133, 89, 10, 0);
  --crt-ink: #262626;
  --action: #b8841c;
  --action-hover: #c8932a;
  --on-action: #1a1404;
  --action-edge: #85590a;
  --link: #85590a;
  --ready: #39783c;
  --shadow-shot: 0 40px 100px rgba(70, 50, 20, 0.22), 0 0 0 1px rgba(60, 45, 20, 0.12);
  --shadow-icon: 0 16px 32px rgba(70, 50, 20, 0.28);
  --backdrop: rgba(60, 45, 20, 0.72);
}