/* Design tokens — the iOS app's semantic palette, light on :root and dark on
   html[data-theme="dark"] (set by /theme-init.js before first paint). Every
   colour in the site lives here; the other stylesheets only reference tokens
   (web/app/test/css-tokens.test.js enforces it). */
:root {
    color-scheme: light;
    --accent: #007AFF;
    --accent-strong: #0062CC;          /* prominent-button fill: ≥ 5:1 with white */
    --green: #34C759;
    --orange: #FF9500;
    --indigo: #5856D6;
    --red: #FF3B30;
    --gray: #8E8E93;
    --text-primary: #000000;
    --text-secondary: rgba(60, 60, 67, 0.6);
    --text-tertiary: rgba(60, 60, 67, 0.3);
    --bg: #FFFFFF;
    --bg-secondary: #F2F2F7;
    --bg-elevated: #FFFFFF;
    --separator: rgba(60, 60, 67, 0.29);
    --fill-1: rgba(0, 0, 0, 0.05);
    --fill-2: rgba(0, 0, 0, 0.08);
    --fill-3: rgba(0, 0, 0, 0.12);
    --gray-fill: rgba(142, 142, 147, 0.12);
    --chrome-border: rgba(0, 0, 0, 0.25);
    --card-border: rgba(0, 0, 0, 0.35);
    --accent-fill: rgba(0, 122, 255, 0.18);
    --accent-ring: rgba(0, 122, 255, 0.6);
    --accent-tint: rgba(0, 122, 255, 0.12);
    --accent-glow: rgba(0, 122, 255, 0.6);
    --accent-halo: rgba(0, 122, 255, 0.4);
    --green-tint: rgba(52, 199, 89, 0.18);
    --orange-tint: rgba(255, 149, 0, 0.18);
    --gray-tint: rgba(142, 142, 147, 0.22);
    --red-tint: rgba(255, 59, 48, 0.12);
    --on-accent: #FFFFFF;
    --badge-stroke: #FFFFFF;
    --scrim: rgba(0, 0, 0, 0.2);
    --scrim-dialog: rgba(0, 0, 0, 0.4);
    --switch-off: rgba(120, 120, 128, 0.16);
    --material-regular: rgba(242, 242, 247, 0.78);
    --material-thick: rgba(242, 242, 247, 0.86);
    --material-ultrathick: rgba(242, 242, 247, 0.94);
    --material-blur: blur(24px) saturate(180%);
    --shadow-chrome: 0 1px 12px rgba(0, 0, 0, 0.18);
    --shadow-marker: 0 1px 6px rgba(0, 0, 0, 0.18);
    --shadow-card: 0 0 20px rgba(0, 0, 0, 0.33);
    --shadow-knob: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.12);
    --radius-card: 20px;
    --radius-bar: 12px;
    --radius-row: 10px;
    --radius-alert: 14px;
    --radius-pill: 999px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-title3: 20px;
    --fs-headline: 17px;
    --fs-body: 17px;
    --fs-subheadline: 15px;
    --fs-footnote: 13px;
    --fs-caption: 12px;
    --fs-caption2: 11px;
    --ctl: 48px;
    --cell: 44px;
    --marker: 44px;
    --panel-w: 420px;
    --panel-inset: 16px;
    --dur-snap: 0.2s;
    --dur-picker: 0.2s;
    --dur-pill: 0.25s;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --accent: #0A84FF;
    --accent-strong: #0A66CC;
    --green: #30D158;
    --orange: #FF9F0A;
    --indigo: #5E5CE6;
    --red: #FF453A;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --bg: #000000;
    --bg-secondary: #1C1C1E;
    --bg-elevated: #2C2C2E;
    --separator: rgba(84, 84, 88, 0.6);
    --fill-1: rgba(255, 255, 255, 0.05);
    --fill-2: rgba(255, 255, 255, 0.08);
    --fill-3: rgba(255, 255, 255, 0.12);
    --chrome-border: rgba(255, 255, 255, 0.25);
    --card-border: rgba(255, 255, 255, 0.35);
    --accent-fill: rgba(10, 132, 255, 0.18);
    --accent-ring: rgba(10, 132, 255, 0.6);
    --accent-tint: rgba(10, 132, 255, 0.12);
    --accent-glow: rgba(10, 132, 255, 0.6);
    --accent-halo: rgba(10, 132, 255, 0.4);
    --green-tint: rgba(48, 209, 88, 0.18);
    --orange-tint: rgba(255, 159, 10, 0.18);
    --red-tint: rgba(255, 69, 58, 0.12);
    --scrim: rgba(0, 0, 0, 0.45);
    --switch-off: rgba(120, 120, 128, 0.32);
    --material-regular: rgba(30, 30, 32, 0.78);
    --material-thick: rgba(30, 30, 32, 0.86);
    --material-ultrathick: rgba(30, 30, 32, 0.94);
}
/* TransparencyGate parity: solid surfaces + stronger rings. */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --material-regular: var(--bg-secondary);
        --material-thick: var(--bg-secondary);
        --material-ultrathick: var(--bg-secondary);
        --material-blur: none;
        --chrome-border: rgba(0, 0, 0, 0.55);
    }
    html[data-theme="dark"] { --chrome-border: rgba(255, 255, 255, 0.55); }
}
@media (prefers-contrast: more) {
    :root { --chrome-border: rgba(0, 0, 0, 0.45); }
    html[data-theme="dark"] { --chrome-border: rgba(255, 255, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    :root { --dur-snap: 0s; --dur-picker: 0s; --dur-pill: 0s; }
}