:root {
  /* Primitives — shared with history.digital's design system (see
     "Die grosse Schweizer Geschichtsumfrage" css/tokens.css). Neutrals in
     OKLCH, accent = mint (primary), info = yellow (existing CTA tone). */
  --ink:             oklch(14% 0.002 0);
  --ink-muted:       oklch(45% 0.002 0);
  --ink-faint:       oklch(64% 0.002 0);
  --surface:         oklch(100% 0 0);
  --surface-sunken:  oklch(96% 0.002 0);
  --border:          oklch(90% 0.002 0);
  --border-strong:   oklch(78% 0.002 0);

  --accent:          #00ffc4;
  --accent-strong:   color-mix(in oklch, #00ffc4 72%, black);
  --accent-soft:     color-mix(in oklch, #00ffc4 16%, white);
  --accent-softer:   color-mix(in oklch, #00ffc4 7%, white);
  --ink-on-accent:   oklch(15% 0.01 165);

  --info:            #FFF200;
  --info-strong:     color-mix(in oklch, #FFF200 62%, black);
  --info-soft:       color-mix(in oklch, #FFF200 28%, white);

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px oklch(14% 0.002 0 / 0.06);
  --shadow-md: 0 4px 16px oklch(14% 0.002 0 / 0.08);
  --shadow-lg: 0 12px 32px oklch(14% 0.002 0 / 0.12);

  --ease-standard:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   360ms;

  --tracking-wide:   0.06em;
  --tracking-widest: 0.14em;

  /* Field-label size — same role as the design system's --text-xs (18px at
     its 100% root), converted for this project's 150% root (1rem = 24px). */
  --text-xs: 0.75rem;

  /* No new font asset — the same "metadata as archive catalog" role the
     design system gives JetBrains Mono is covered here by the system mono
     stack already used ad hoc by #jump-input. */
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Colors — backgrounds. Pure black + teal vignette is the Cardviewer's
     own dark-room imagery; the borrowed system has no app-shell background
     of its own, so these stay literal. */
  --color-background:         #000000;
  --color-background-ellipse: #28393f;
  --color-surface:            var(--surface);

  /* Colors — text */
  --color-text:         var(--ink);
  --color-text-muted:   var(--ink-muted);
  --color-text-faint:   var(--ink-faint);
  --color-text-lighter: color-mix(in oklch, var(--ink-faint) 55%, white);
  --color-card-title:   rgba(255, 255, 255, 0.55);

  /* Colors — UI */
  --color-navigation-outline: color-mix(in oklch, var(--ink) 20%, transparent);
  --color-overlay-background: color-mix(in oklch, var(--ink) 65%, transparent);
  --color-key-background:     var(--surface-sunken);
  --color-border:             var(--border);

  /* Border radii */
  --radius-navigation: 60px;   /* the Pill — geometry, left untouched */
  --radius-panel:      var(--radius-lg);
  --radius-key:        var(--radius-sm);

  /* Spacing */
  --gap-navigation: 16px;      /* the Pill — geometry, left untouched */
}