/* Wayfinder design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --board: #efede6;
  --panel: #fbfaf6;
  --ink: #13233f;
  --ink-soft: #4d5970;
  --flap: #172744;
  --flap-ink: #f7f4ea;
  --navy: #13233f;
  --white: #ffffff;
  --line-yellow: #f5c400;
  --line-sky: #3db4e6;
  --line-orange: #ef7d22;
  --line-green: #00845a;
  --line-red: #c0263a;
  --line-violet: #5b3596;
  --shadow-plate: inset 0 1px 0 #ffffff59, 0 3px 0 #0b1830, 0 6px 10px -6px #13233f80;
  --shadow-plate-soft: inset 0 1px 0 #ffffffcc, 0 0 0 1px #13233f2e, 0 3px 0 #13233f33, 0 6px 10px -6px #13233f59;
  --shadow-pressed: inset 0 2px 3px #0b183040, 0 0 0 1px #13233f2e;
  --shadow-panel: 0 0 0 1px #13233f1f, 0 2px 0 #13233f1a, 0 12px 24px -16px #13233f59;
  --shadow-float: 0 0 0 1px #13233f1f, 0 18px 40px -16px #13233f73;
  color-scheme: light;
}
[data-theme="dark"] {
  --board: #0c1729;
  --panel: #15233a;
  --ink: #f2efe6;
  --ink-soft: #a7b2c4;
  --flap: #1f2a40;
  --flap-ink: #ffb43f;
  --navy: #13233f;
  --white: #ffffff;
  --line-yellow: #f7cc2a;
  --line-sky: #52c0ee;
  --line-orange: #f28a35;
  --line-green: #00845a;
  --line-red: #cc2f3d;
  --line-violet: #7448b0;
  --shadow-plate: inset 0 1px 0 #ffffff33, 0 3px 0 #a99f87, 0 6px 10px -6px #000000b3;
  --shadow-plate-soft: inset 0 1px 0 #ffffff1a, 0 0 0 1px #ffffff1f, 0 3px 0 #050a14, 0 6px 10px -6px #000000b3;
  --shadow-pressed: inset 0 2px 3px #00000080, 0 0 0 1px #ffffff1f;
  --shadow-panel: 0 0 0 1px #ffffff14, 0 2px 0 #050a14, 0 12px 24px -16px #000000cc;
  --shadow-float: 0 0 0 1px #ffffff1a, 0 18px 40px -12px #000000e6;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --font-sign: "Overpass", "Highway Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-flap: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --type-display-family: var(--font-sign);
  --type-display-size: 44px;
  --type-display-line: 48px;
  --type-display-weight: 800;
  --type-display-tracking: -0.01em;
  --type-title-family: var(--font-sign);
  --type-title-size: 22px;
  --type-title-line: 28px;
  --type-title-weight: 700;
  --type-title-tracking: -0.005em;
  --type-body-family: var(--font-sign);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-small-family: var(--font-sign);
  --type-small-size: 14px;
  --type-small-line: 20px;
  --type-small-weight: 500;
  --type-label-family: var(--font-sign);
  --type-label-size: 13px;
  --type-label-line: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.06em;
  --type-flap-family: var(--font-flap);
  --type-flap-size: 24px;
  --type-flap-line: 32px;
  --type-flap-weight: 600;
  --type-flap-tracking: 0.02em;
}
/* Type styles as utility classes (optional) */
.type-display { font-family: var(--type-display-family); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); }
.type-small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); }
.type-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.type-flap { font-family: var(--type-flap-family); font-size: var(--type-flap-size); line-height: var(--type-flap-line); font-weight: var(--type-flap-weight); letter-spacing: var(--type-flap-tracking); }