/* Design tokens. Primitives copied from folco.me (tokens/*.json, 2026-10-10); components use
   only the semantic names below. Light/dark follow the system; [data-theme] overrides. */

@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); }

:root {
  /* primitives */
  --ink-950: #161616; --ink-900: #1E1E1E; --ink-800: #262626; --ink-700: #333333; --ink-400: #9A9A9A;
  --paper-50: #FFFFFF; --paper-100: #EFEFEF; --paper-200: #E2E2E2; --paper-300: #CFCFCF; --paper-600: #5E5E5E;
  --graphite: #1E1E1E; --light: #EFEFEF;
  --coral-100: #F7D4D4; --coral-500: #EE7575; --coral-700: #C23838; --coral-900: #3E1E1E;
  --green-100: #D4F7D4; --green-500: #75EE75; --green-700: #247B24; --green-900: #1E3E1E;
  --butter-100: #F7F1D4; --butter-500: #EFDB76; --butter-700: #776922;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius: 0;
  --font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --duration-fast: 160ms; --duration-base: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --panel-width: 380px;
  --tap: 44px;

  /* semantic, light */
  --color-bg: var(--paper-100);
  --color-surface: var(--paper-50);
  --color-surface-2: var(--paper-200);
  --color-text: var(--graphite);
  --color-muted: var(--paper-600);
  --color-line: var(--paper-300);
  --color-accent: var(--coral-500);
  --color-on-accent: var(--graphite);
  --color-accent-text: var(--coral-700);
  --color-ok: var(--green-700);
  --color-warn: var(--butter-700);
  --color-warn-bg: var(--butter-100);
  --color-stage: var(--paper-200);
  --color-paper: #FFFFFF; /* the sticker roll: always white, it represents the paper */
  --color-progress: rgba(238, 117, 117, 0.28);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--ink-900);
    --color-surface: var(--ink-800);
    --color-surface-2: var(--ink-700);
    --color-text: var(--light);
    --color-muted: var(--ink-400);
    --color-line: var(--ink-700);
    --color-accent-text: var(--coral-500);
    --color-ok: var(--green-500);
    --color-warn: var(--butter-500);
    --color-warn-bg: #3E391E;
    --color-stage: var(--ink-950);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-surface-2: var(--ink-700);
  --color-text: var(--light);
  --color-muted: var(--ink-400);
  --color-line: var(--ink-700);
  --color-accent-text: var(--coral-500);
  --color-ok: var(--green-500);
  --color-warn: var(--butter-500);
  --color-warn-bg: #3E391E;
  --color-stage: var(--ink-950);
  color-scheme: dark;
}