/* BounceWarden tokens, generated from the design system's tokens.json. Paper (light) is the
   default; Night shift (dark) follows the OS unless data-theme says otherwise. */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; font-stretch: 62% 125%; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --font-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 9999px;
  --content-width: 1120px;
  --text-measure: 640px;
  --sidebar-width: 248px;
  --surface: #edf0ea;
  --surface-raised: #f8f9f6;
  --surface-sunk: #e2e7e0;
  --line: #c9d1c8;
  --line-strong: #76837a;
  --ink: #17203a;
  --ink-muted: #4e5869;
  --ward: #2b4c9b;
  --ward-hover: #223f82;
  --ward-soft: #dce3f2;
  --on-ward: #ffffff;
  --guilloche: #b8c5e3;
  --valid: #11694f;
  --valid-soft: #d5ede4;
  --risky: #865800;
  --risky-soft: #f5e6c4;
  --invalid: #b2321f;
  --invalid-soft: #f7dcd6;
  --unknown: #566070;
  --unknown-soft: #e1e5ea;
  --link: var(--ward);
  --shadow-float: 0 1px 2px #17203a14, 0 8px 24px -4px #17203a29;
  --focus-ring: 0 0 0 2px #f8f9f6, 0 0 0 4px #2b4c9b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0e1424;
    --surface-raised: #151d31;
    --surface-sunk: #0a0f1b;
    --line: #263049;
    --line-strong: #5e6a85;
    --ink: #e7ece5;
    --ink-muted: #a4aec0;
    --ward: #93abf2;
    --ward-hover: #b4c5f6;
    --ward-soft: #1e2b4f;
    --on-ward: #0e1424;
    --guilloche: #34477a;
    --valid: #5cd0a5;
    --valid-soft: #12332a;
    --risky: #e8b84e;
    --risky-soft: #382c10;
    --invalid: #ff8c73;
    --invalid-soft: #3d1c16;
    --unknown: #a9b2c2;
    --unknown-soft: #222a3a;
    --link: var(--ward);
    --shadow-float: 0 8px 24px -4px #000000b3;
    --focus-ring: 0 0 0 2px #0e1424, 0 0 0 4px #93abf2;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0e1424;
  --surface-raised: #151d31;
  --surface-sunk: #0a0f1b;
  --line: #263049;
  --line-strong: #5e6a85;
  --ink: #e7ece5;
  --ink-muted: #a4aec0;
  --ward: #93abf2;
  --ward-hover: #b4c5f6;
  --ward-soft: #1e2b4f;
  --on-ward: #0e1424;
  --guilloche: #34477a;
  --valid: #5cd0a5;
  --valid-soft: #12332a;
  --risky: #e8b84e;
  --risky-soft: #382c10;
  --invalid: #ff8c73;
  --invalid-soft: #3d1c16;
  --unknown: #a9b2c2;
  --unknown-soft: #222a3a;
  --link: var(--ward);
  --shadow-float: 0 8px 24px -4px #000000b3;
  --focus-ring: 0 0 0 2px #0e1424, 0 0 0 4px #93abf2;
}