/* ============================================
   tokens.css — Design tokens and theme variables
   ============================================ */
:root {
  --red: #c62828;
  --red-bright: #ed292f;
  --accent-text: var(--red);
  --ink: #17191c;
  --paper: #f6f6f4;
  --surface: #fff;
  --surface-soft: #f7f7f5;
  --surface-header: rgba(255, 255, 255, .97);
  --surface-form: var(--surface);
  --surface-input: #fafafa;
  --text-muted: #6b6d70;
  --text-subtle: var(--text-muted);
  --text-form: #424449;
  --text-placeholder: #686b6e;
  --border: #d8d8d5;
  --border-strong: #dedede;
  --header-border: rgba(23, 25, 28, .08);
  --hero-background: radial-gradient(ellipse at 76% 48%, rgba(198, 40, 40, .08), transparent 36%), linear-gradient(115deg, #f1f1ef 5%, #fafaf9 72%, #f5f5f3);
  --hero-text: #17191c;
  --hero-muted: #55595d;
  --hero-grid-lines: rgba(23, 25, 28, .1);
  --hero-ring: rgba(23, 25, 28, .12);
  --hero-orbit-shadow: 0 0 0 60px rgba(23, 25, 28, .025), 0 0 0 120px rgba(23, 25, 28, .015);
  --surface-contrast: #fff;
  --surface-contrast-soft: #f1f1ef;
  --surface-contrast-text: #17191c;
  --surface-contrast-muted: #55595d;
  --surface-contrast-border: rgba(23, 25, 28, .15);
  --status-success-bg: #e8f4ed;
  --status-success-text: #23603c;
  --status-error-bg: #fff0f0;
  --status-error-text: #a32025;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif;
  --container: 1200px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent-text: #ff777b;
  --ink: #f1f2f0;
  --paper: #151719;
  --surface: #1d2023;
  --surface-soft: #191c1f;
  --surface-header: rgba(25, 27, 30, .97);
  --surface-form: #202327;
  --surface-input: #171a1d;
  --text-muted: #c0c3c6;
  --text-subtle: #b3b6b9;
  --text-form: #e2e4e5;
  --text-placeholder: #aeb2b6;
  --border: #3c4044;
  --border-strong: #51565b;
  --header-border: rgba(255, 255, 255, .13);
  --hero-background: radial-gradient(ellipse at 76% 48%, rgba(198, 40, 40, .22), transparent 36%), linear-gradient(115deg, #151719 5%, #202226 72%, #191a1d);
  --hero-text: #fff;
  --hero-muted: #c3c6c9;
  --hero-grid-lines: rgba(255, 255, 255, .11);
  --hero-ring: rgba(255, 255, 255, .1);
  --hero-orbit-shadow: 0 0 0 60px rgba(255, 255, 255, .018), 0 0 0 120px rgba(255, 255, 255, .014);
  --surface-contrast: #151719;
  --surface-contrast-soft: #202327;
  --surface-contrast-text: #f1f2f0;
  --surface-contrast-muted: #c0c3c6;
  --surface-contrast-border: rgba(255, 255, 255, .14);
  --status-success-bg: #163523;
  --status-success-text: #b7ebc8;
  --status-error-bg: #421d20;
  --status-error-text: #ffc2c3;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --accent-text: #ff777b;
    --ink: #f1f2f0;
    --paper: #151719;
    --surface: #1d2023;
    --surface-soft: #191c1f;
    --surface-header: rgba(25, 27, 30, .97);
    --surface-form: #202327;
    --surface-input: #171a1d;
    --text-muted: #c0c3c6;
    --text-subtle: #b3b6b9;
    --text-form: #e2e4e5;
    --text-placeholder: #aeb2b6;
    --border: #3c4044;
    --border-strong: #51565b;
    --header-border: rgba(255, 255, 255, .13);
    --hero-background: radial-gradient(ellipse at 76% 48%, rgba(198, 40, 40, .22), transparent 36%), linear-gradient(115deg, #151719 5%, #202226 72%, #191a1d);
    --hero-text: #fff;
    --hero-muted: #c3c6c9;
    --hero-grid-lines: rgba(255, 255, 255, .11);
    --hero-ring: rgba(255, 255, 255, .1);
    --hero-orbit-shadow: 0 0 0 60px rgba(255, 255, 255, .018), 0 0 0 120px rgba(255, 255, 255, .014);
    --surface-contrast: #151719;
    --surface-contrast-soft: #202327;
    --surface-contrast-text: #f1f2f0;
    --surface-contrast-muted: #c0c3c6;
    --surface-contrast-border: rgba(255, 255, 255, .14);
    --status-success-bg: #163523;
    --status-success-text: #b7ebc8;
    --status-error-bg: #421d20;
    --status-error-text: #ffc2c3;
    color-scheme: dark;
  }
}