/* Flex design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --bone: #ebe5d8;
  --bone-raised: #f6f2ea;
  --bone-sunk: #ddd5c5;
  --ink: #151412;
  --ink-soft: #575249;
  --rule: #d2c9b8;
  --rule-strong: #857d6f;
  --ultra: #2a2fd9;
  --ultra-ink: #2a2fd9;
  --on-ultra: #f6f2ea;
  --ultra-wash: #d9daf4;
  --alarm: #b2311b;
  --invert: #151412;
  --on-invert: #ece6d9;
  --on-invert-soft: #aaa395;
  --focus: #2a2fd9;
  --scrim: rgba(21, 20, 18, 0.52);
  --shadow-none: none;
  --shadow-rest: 0 1px 0 rgba(21, 20, 18, 0.06);
  --shadow-lift: 0 18px 36px -22px rgba(21, 20, 18, 0.5);
  --shadow-pop: 0 22px 44px -18px rgba(21, 20, 18, 0.45), 0 2px 6px rgba(21, 20, 18, 0.08);
  --shadow-modal: 0 40px 90px -30px rgba(21, 20, 18, 0.6);
  color-scheme: light;
}
[data-theme="dark"] {
  --bone: #121110;
  --bone-raised: #1c1b18;
  --bone-sunk: #2a2824;
  --ink: #ece6d9;
  --ink-soft: #a59e91;
  --rule: #33302b;
  --rule-strong: #77716a;
  --ultra: #4248f0;
  --ultra-ink: #9a9eff;
  --on-ultra: #f6f2ea;
  --ultra-wash: #22245a;
  --alarm: #ff8a73;
  --invert: #ece6d9;
  --on-invert: #151412;
  --on-invert-soft: #57524a;
  --focus: #9a9eff;
  --scrim: rgba(0, 0, 0, 0.66);
  --shadow-rest: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 18px 36px -20px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 22px 44px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(236, 230, 217, 0.08);
  --shadow-modal: 0 40px 90px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(236, 230, 217, 0.08);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 56px;
  --space-8: 96px;
  --radius-0: 0px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;
  --dur-press: 90ms;
  --dur-swell: 320ms;
  --dur-settle: 460ms;
  --dur-roll: 900ms;
  --dur-breathe: 900ms;
  --ease-swell: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-breathe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-roll: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --font-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-xl-family: var(--font-display);
  --type-display-xl-size: 112px;
  --type-display-xl-line: 0.86;
  --type-display-xl-weight: 850;
  --type-display-xl-tracking: -0.01em;
  --type-display-l-family: var(--font-display);
  --type-display-l-size: 64px;
  --type-display-l-line: 0.92;
  --type-display-l-weight: 800;
  --type-headline-family: var(--font-display);
  --type-headline-size: 34px;
  --type-headline-line: 36px;
  --type-headline-weight: 760;
  --type-numeral-family: var(--font-display);
  --type-numeral-size: 52px;
  --type-numeral-line: 1;
  --type-numeral-weight: 760;
  --type-title-family: var(--font-ui);
  --type-title-size: 19px;
  --type-title-line: 24px;
  --type-title-weight: 680;
  --type-body-family: var(--font-ui);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-body-sm-family: var(--font-ui);
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-body-sm-weight: 420;
  --type-label-family: var(--font-ui);
  --type-label-size: 11.5px;
  --type-label-line: 16px;
  --type-label-weight: 680;
  --type-label-tracking: 0.09em;
}
/* Type styles as utility classes (optional) */
.type-display-xl { font-family: var(--type-display-xl-family); font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); font-weight: var(--type-display-xl-weight); letter-spacing: var(--type-display-xl-tracking); }
.type-display-l { font-family: var(--type-display-l-family); font-size: var(--type-display-l-size); line-height: var(--type-display-l-line); font-weight: var(--type-display-l-weight); }
.type-headline { font-family: var(--type-headline-family); font-size: var(--type-headline-size); line-height: var(--type-headline-line); font-weight: var(--type-headline-weight); }
.type-numeral { font-family: var(--type-numeral-family); font-size: var(--type-numeral-size); line-height: var(--type-numeral-line); font-weight: var(--type-numeral-weight); }
.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); }
.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-body-sm { font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-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); }