/* WC Design v2 */
/* Canonical palette and geometry. Copy through END WC TOKENS verbatim. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --fill: rgba(28,28,30,.055);
  --fill-2: rgba(28,28,30,.09);
  --sep: rgba(28,28,30,.09);
  --control-line: #858580;
  --ink: #1C1C1E;
  --ink-2: #48484D;
  --ink-3: #5F5F65;
  --accent: #C8102E;
  --accent-ink: #A30D25;
  --accent-fill: rgba(200,16,46,.09);
  --on-accent: #FFFFFF;
  --amber-ink: #9A4000;
  --amber-fill: rgba(184,78,0,.10);
  --green-ink: #166A49;
  --green-fill: rgba(26,125,85,.10);
  --blue-ink: #3B5C9A;
  --blue-fill: rgba(59,92,154,.10);
  --scrim: rgba(0,0,0,.32);
  --shadow-card: 0 1px 2px rgba(20,20,22,.04), 0 6px 20px rgba(20,20,22,.06);
  --shadow-raised: 0 2px 6px rgba(20,20,22,.06), 0 14px 36px rgba(20,20,22,.10);
  --shadow-sheet: 0 -10px 44px rgba(0,0,0,.18);
  --nav-surface: rgba(255,255,255,.86);
}
:root {
  --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px;
  --text-display: 64px; --text-brand: 11px;
  --lh-tight: 1.25; --lh-meta: 1.333333333; --lh-body: 1.5; --lh-brand: 1;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --weight-regular: 400; --weight-medium: 500; --weight-strong: 600;
  --tracking-label: .04em; --tracking-count: -.02em;
  --target: 48px; --row-height: 56px; --pill-height: 32px;
  --icon: 24px; --icon-sm: 16px; --chevron: 8px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
  --reading-width: 720px; --site-width: 1080px; --sheet-width: 560px;
  --brand-width: 176px; --hub-brand-width: 200px;
  --nav-height: 72px; --rail-width: 208px;
  --nav-safe-height: calc(var(--nav-height) + env(safe-area-inset-bottom,0px));
  --hairline: 1px; --stroke: 2px; --stroke-icon: 1.75px; --optical: 1px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --duration-state: 120ms; --duration-expand: 220ms; --duration-sheet: 260ms;
  --layer-bar: 6; --layer-dialog: 20;
}
:root, [data-theme] {
  --panel: var(--surface); --panel-2: var(--surface-2); --bg-2: var(--surface-2);
  --line: var(--sep); --line-2: var(--control-line);
  --red: var(--accent); --red-ink: var(--accent-ink); --red-tint: var(--accent-fill);
  --amber-tint: var(--amber-fill); --green-tint: var(--green-fill); --blue-tint: var(--blue-fill);
  --focus: var(--accent-ink); --shadow: var(--shadow-card);
  --r-control: var(--radius-sm); --r-stamp: var(--radius-sm);
  --r-card: var(--radius-md); --r-group: var(--radius-md);
  --r-sheet: var(--radius-lg); --r-pill: var(--radius-full);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B0C;
  --surface: #161618;
  --surface-2: #1E1E21;
  --fill: rgba(255,255,255,.07);
  --fill-2: rgba(255,255,255,.11);
  --sep: rgba(255,255,255,.08);
  --control-line: #737379;
  --ink: rgba(255,255,255,.94);
  --ink-2: rgba(255,255,255,.70);
  --ink-3: rgba(255,255,255,.58);
  --accent: #C8102E;
  --accent-ink: #FF6375;
  --accent-fill: rgba(255,84,104,.14);
  --on-accent: #FFFFFF;
  --amber-ink: #FFB37A;
  --amber-fill: rgba(255,179,122,.12);
  --green-ink: #80D7AE;
  --green-fill: rgba(128,215,174,.12);
  --blue-ink: #A4C0F5;
  --blue-fill: rgba(164,192,245,.12);
  --scrim: rgba(0,0,0,.32);
  --shadow-card: inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow-raised: inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow-sheet: 0 -10px 44px rgba(0,0,0,.5);
  --nav-surface: rgba(22,22,24,.86);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0B0B0C;
    --surface: #161618;
    --surface-2: #1E1E21;
    --fill: rgba(255,255,255,.07);
    --fill-2: rgba(255,255,255,.11);
    --sep: rgba(255,255,255,.08);
    --control-line: #737379;
    --ink: rgba(255,255,255,.94);
    --ink-2: rgba(255,255,255,.70);
    --ink-3: rgba(255,255,255,.58);
    --accent: #C8102E;
    --accent-ink: #FF6375;
    --accent-fill: rgba(255,84,104,.14);
    --on-accent: #FFFFFF;
    --amber-ink: #FFB37A;
    --amber-fill: rgba(255,179,122,.12);
    --green-ink: #80D7AE;
    --green-fill: rgba(128,215,174,.12);
    --blue-ink: #A4C0F5;
    --blue-fill: rgba(164,192,245,.12);
    --scrim: rgba(0,0,0,.32);
    --shadow-card: inset 0 0 0 1px rgba(255,255,255,.06);
    --shadow-raised: inset 0 0 0 1px rgba(255,255,255,.06);
    --shadow-sheet: 0 -10px 44px rgba(0,0,0,.5);
    --nav-surface: rgba(22,22,24,.86);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root, [data-theme] {
    --duration-state: 0ms; --duration-expand: 0ms; --duration-sheet: 0ms;
  }
}
/* END WC TOKENS */