/* GENERATED by scripts/build_tokens.py from DESIGN.md (item MH phase 3). Do not edit: test_build_tokens.py goes red on a hand edit. Change DESIGN.md and run `.venv/bin/python3 scripts/build_tokens.py`. */

/* Light is the default; the dark values apply under the system's dark
   setting unless the page says data-theme="light", and always under
   data-theme="dark". Motion is a duration and a curve: under
   prefers-reduced-motion, a change that moves does not travel. */
:root {
  color-scheme: light dark;
  --color-band: #F5F5F5;
  --color-card: #ECECEC;
  --color-category-1: #346AAC;
  --color-category-1-soft: #DDE7F3;
  --color-category-2: #A24B36;
  --color-category-2-soft: #F2E1DD;
  --color-category-3: #287C42;
  --color-category-3-soft: #DDE9DF;
  --color-category-4: #7955A0;
  --color-category-4-soft: #E8E3F0;
  --color-category-5: #886200;
  --color-category-5-soft: #EBE5D8;
  --color-category-6: #007C84;
  --color-category-6-soft: #D8EAEB;
  --color-conflict: #B3261E;
  --color-deep: #0D1E40;
  --color-deep-2: #050F23;
  --color-ghost: #B4B4B4;
  --color-grid: #EEEEEE;
  --color-ground: #FFFFFF;
  --color-holo: #B1D2FF;
  --color-ink: #121212;
  --color-ink-2: #4A4A4A;
  --color-ink-3: #5A5A5A;
  --color-ink-wash: #ECECEC;
  --color-ink-wash-edge: #A8A8A8;
  --color-needs: #8A5300;
  --color-on-category: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-on-tint: #FFFFFFF5;
  --color-on-tint-2: #FFFFFFB3;
  --color-primary: #183060;
  --color-primary-ink: #183060;
  --color-rule: #E2E2E2;
  --color-scrim: #0000004D;
  --color-surface: #FFFFFF;
  --color-tint: #5471A6;
  --color-wash: #D3D8E1;
  --type-title-family: -apple-system, system-ui, sans-serif;
  --type-title-size: 26.6px;
  --type-title-weight: 600;
  --type-title-line-height: 1.1;
  --type-title-tracking: -0.01em;
  --type-headline-family: -apple-system, system-ui, sans-serif;
  --type-headline-size: 21.3px;
  --type-headline-weight: 600;
  --type-headline-line-height: 1.2;
  --type-headline-tracking: -0.01em;
  --type-body-family: -apple-system, system-ui, sans-serif;
  --type-body-size: 17px;
  --type-body-weight: 400;
  --type-body-line-height: 1.4;
  --type-body-strong-family: -apple-system, system-ui, sans-serif;
  --type-body-strong-size: 17px;
  --type-body-strong-weight: 600;
  --type-body-strong-line-height: 1.4;
  --type-note-family: -apple-system, system-ui, sans-serif;
  --type-note-size: 15px;
  --type-note-weight: 400;
  --type-note-line-height: 1.4;
  --type-name-family: -apple-system, system-ui, sans-serif;
  --type-name-size: 13.6px;
  --type-name-weight: 500;
  --type-name-line-height: 1.3;
  --type-button-family: -apple-system, system-ui, sans-serif;
  --type-button-size: 13.6px;
  --type-button-weight: 600;
  --type-button-line-height: 1.2;
  --type-nav-link-family: -apple-system, system-ui, sans-serif;
  --type-nav-link-size: 15px;
  --type-nav-link-weight: 600;
  --type-nav-link-line-height: 1.2;
  --type-meta-family: -apple-system, system-ui, sans-serif;
  --type-meta-size: 12px;
  --type-meta-weight: 400;
  --type-meta-line-height: 1.4;
  --type-numeral-family: -apple-system, system-ui, sans-serif;
  --type-numeral-size: 12px;
  --type-numeral-weight: 400;
  --type-numeral-line-height: 1.4;
  --type-label-family: -apple-system, system-ui, sans-serif;
  --type-label-size: 12px;
  --type-label-weight: 400;
  --type-label-line-height: 1.4;
  --type-label-tracking: 0.08em;
  --type-instrument-family: ui-monospace, SF Mono, Menlo, monospace;
  --type-instrument-size: 12px;
  --type-instrument-weight: 400;
  --type-instrument-line-height: 1.3;
  --type-wordmark-family: Gelasio, Georgia, serif;
  --type-wordmark-size: 24px;
  --type-wordmark-weight: 600;
  --type-wordmark-line-height: 1;
  --type-wordmark-tracking: -0.028em;
  --radius-bar: 2px;
  --radius-block: 5px;
  --radius-bracket: 6px;
  --radius-tile: 7.5px;
  --radius-control: 12.5px;
  --radius-sheet: 15px;
  --space-hairline: 1px;
  --space-block-gap: 2px;
  --space-block-pad-y: 3px;
  --space-block-pad-x: 7px;
  --space-thin-block: 18px;
  --space-screen-margin: 20px;
  --space-touch: 44px;
  --space-timeline-minute: 1.47px;
  --motion-standard-duration: 450ms;
  --motion-standard-easing: cubic-bezier(0.3, 0, 0, 1);
  --site-hero-size: clamp(30px, calc(2.5vw + 18px), 54px);
  --stroke-block-flexible: 1px dashed var(--color-ink-3);
  --stroke-block-pinned: 1.5px solid var(--color-primary-ink);
  --stroke-block-wash-edge: 1px solid var(--color-ink-wash-edge);
  --stroke-now-line: 1.5px solid var(--color-primary-ink);
  --stroke-rail-bracket: 1.5px solid var(--color-primary-ink);
  --stroke-instrument-ghost: 1px dotted var(--color-ghost);
  --stroke-instrument-trace: 1px solid var(--color-primary-ink);
  --stroke-block-rest: 1px dotted var(--color-ghost);
  --stroke-block-leg: 1px solid var(--color-ink-3);
  --stroke-button-outline: 1px solid var(--color-ink-3);
  --stroke-button-outline-on-deep: 1px solid var(--color-on-tint-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-band: #1F1F1F;
    --color-card: #262626;
    --color-category-1: #39659B;
    --color-category-1-soft: #212C3A;
    --color-category-2: #934C3A;
    --color-category-2-soft: #392621;
    --color-category-3: #337344;
    --color-category-3-soft: #213023;
    --color-category-4: #715391;
    --color-category-4-soft: #2F2838;
    --color-category-5: #7D5E07;
    --color-category-5-soft: #322A1A;
    --color-category-6: #00747A;
    --color-category-6-soft: #183031;
    --color-conflict: #F2766B;
    --color-deep: #0D1E40;
    --color-deep-2: #050F23;
    --color-ghost: #444444;
    --color-grid: #191919;
    --color-ground: #000000;
    --color-holo: #B1D2FF;
    --color-ink: #F2F2F2;
    --color-ink-2: #B4B4B4;
    --color-ink-3: #A2A2A2;
    --color-ink-wash: #1D1D1D;
    --color-ink-wash-edge: #4A4A4A;
    --color-needs: #E2B350;
    --color-on-category: #FFFFFF;
    --color-on-primary: #101114;
    --color-on-tint: #FFFFFFF5;
    --color-on-tint-2: #FFFFFFB3;
    --color-primary: #8CABE4;
    --color-primary-ink: #8CABE4;
    --color-rule: #2A2A2A;
    --color-scrim: #00000099;
    --color-surface: #161616;
    --color-tint: #5471A6;
    --color-wash: #2D333D;
  }
}

:root[data-theme="dark"] {
  --color-band: #1F1F1F;
  --color-card: #262626;
  --color-category-1: #39659B;
  --color-category-1-soft: #212C3A;
  --color-category-2: #934C3A;
  --color-category-2-soft: #392621;
  --color-category-3: #337344;
  --color-category-3-soft: #213023;
  --color-category-4: #715391;
  --color-category-4-soft: #2F2838;
  --color-category-5: #7D5E07;
  --color-category-5-soft: #322A1A;
  --color-category-6: #00747A;
  --color-category-6-soft: #183031;
  --color-conflict: #F2766B;
  --color-deep: #0D1E40;
  --color-deep-2: #050F23;
  --color-ghost: #444444;
  --color-grid: #191919;
  --color-ground: #000000;
  --color-holo: #B1D2FF;
  --color-ink: #F2F2F2;
  --color-ink-2: #B4B4B4;
  --color-ink-3: #A2A2A2;
  --color-ink-wash: #1D1D1D;
  --color-ink-wash-edge: #4A4A4A;
  --color-needs: #E2B350;
  --color-on-category: #FFFFFF;
  --color-on-primary: #101114;
  --color-on-tint: #FFFFFFF5;
  --color-on-tint-2: #FFFFFFB3;
  --color-primary: #8CABE4;
  --color-primary-ink: #8CABE4;
  --color-rule: #2A2A2A;
  --color-scrim: #00000099;
  --color-surface: #161616;
  --color-tint: #5471A6;
  --color-wash: #2D333D;
}