/*
  Design tokens: "Signal". A Swiss, utilitarian tool. Cool grey canvas, black ink and rules,
  square corners, one signal-orange accent used for primary actions only.
*/
:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #F2F2F0;
  --panel: #FFFFFF;
  --panel-sunk: #E8E8E5;

  /* Ink */
  --ink: #0B0B0B;
  --ink-2: #585858;

  /* Rules: hairlines between rows, heavy black rules between sections */
  --rule: #D4D4D0;
  --rule-strong: #0B0B0B;
  --rule-heavy: 2px;

  /* Signal orange. Always carries black text (7:1); never used as text on white. */
  --accent: #FF4F00;
  --accent-hover: #E04400;
  --accent-ink: #0B0B0B;
  --accent-wash: #FFE6D9;

  /* Focus is black (or white in dark mode): orange alone is below 3:1 on white. */
  --focus: #0B0B0B;

  /* Status (always paired with a text label) */
  --status-verified: #0A7A3B;
  --status-pending: #8A5A00;
  --status-bad: #C4111D;
  --status-muted: #585858;

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 34px;
  --leading: 1.5;
  --tracking-tight: -0.025em;
  --tracking-label: 0.08em;

  /* Shape and space: square corners, 8 px grid */
  --radius: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --content-max: 1040px;
  --gutter: 16px;

  --duration: 100ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0D0D0D;
    --panel: #161616;
    --panel-sunk: #0A0A0A;
    --ink: #F2F2F0;
    --ink-2: #A0A0A0;
    --rule: #2C2C2C;
    --rule-strong: #F2F2F0;
    --accent: #FF5A1F;
    --accent-hover: #FF7440;
    --accent-ink: #0B0B0B;
    --accent-wash: #3A1A0C;
    --focus: #F2F2F0;
    --status-verified: #4CC27E;
    --status-pending: #E3AB4A;
    --status-bad: #FF6B6B;
    --status-muted: #A0A0A0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D0D0D;
  --panel: #161616;
  --panel-sunk: #0A0A0A;
  --ink: #F2F2F0;
  --ink-2: #A0A0A0;
  --rule: #2C2C2C;
  --rule-strong: #F2F2F0;
  --accent: #FF5A1F;
  --accent-hover: #FF7440;
  --accent-ink: #0B0B0B;
  --accent-wash: #3A1A0C;
  --focus: #F2F2F0;
  --status-verified: #4CC27E;
  --status-pending: #E3AB4A;
  --status-bad: #FF6B6B;
  --status-muted: #A0A0A0;
}

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