/* Spec Plate tokens. Light theme "Aluminium", dark theme "Charcoal". */
:root {
  color-scheme: light;

  --alu: #E4E3DF;
  --plate: #F2F1EE;
  --ink: #1C1C1C;
  --etch: #55544F;
  --rule: #8A8984;
  --signal: #F5C518;
  --on-signal: #1C1C1C;
  --band: #1C1C1C;
  --on-band: #F2F1EE;
  --ok: #23663F;
  --fault: #A32018;
  --focus: #1C1C1C;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-14: 56px;

  --radius-none: 0;
  --radius-dot: 50%;

  --stroke-frame: 2px;
  --stroke-tag: 1.5px;
  --stroke-hair: 1px;

  --content-width: 1200px;
  --gutter: var(--space-14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --alu: #141414;
    --plate: #1F1F1F;
    --ink: #F2F1EE;
    --etch: #B5B4AE;
    --rule: #6A6964;
    --band: #0A0A0A;
    --ok: #7FD3A1;
    --fault: #FF9C8F;
    --focus: #F5C518;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --alu: #141414;
  --plate: #1F1F1F;
  --ink: #F2F1EE;
  --etch: #B5B4AE;
  --rule: #6A6964;
  --band: #0A0A0A;
  --ok: #7FD3A1;
  --fault: #FF9C8F;
  --focus: #F5C518;
}

@media (max-width: 720px) {
  :root { --gutter: var(--space-4); }
}