:root,
[data-theme="light"] {
  --c-bg: #FBF8F3; --c-surface: #FFFFFF; --c-surface-2: #F3EEE6;
  --c-line: #E5DDD2; --c-line-strong: #897D70;
  --c-text: #28231F; --c-muted: #6D655D;
  --c-accent: #AD4B2C; --c-accent-hover: #943E23; --c-accent-active: #80351E;
  --c-on-accent: #FFFFFF; --c-accent-tint: #FCEEE7;
  --c-accent2: #176D65; --c-accent2-hover: #125A53; --c-accent2-active: #0E4943;
  --c-on-accent2: #FFFFFF; --c-accent2-tint: #E7F2EE;
  --c-danger: #9B2C24; --c-on-danger: #FFFFFF;
  --c-inverse: #28231F; --c-on-inverse: #FBF8F3;
  --c-handoff: #176D65; --c-on-handoff: #FFFFFF; --c-on-handoff-muted: #E4F1EE; --c-handoff-fill: #0E4943;
  --c-focus: #28231F; --c-scrim: rgb(40 35 31 / 0.40);
  --sh-raise: 0 1px 2px rgb(40 35 31 / 0.04), 0 8px 24px rgb(40 35 31 / 0.07);
  --sh-sheet: 0 -8px 32px rgb(40 35 31 / 0.14);
  --yaid-bg: #000000; --yaid-text: #FFFFFF;
}

:root { color-scheme: light dark; }
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #16130F; --c-surface: #231E19; --c-surface-2: #2E2721;
    --c-line: #3A3129; --c-line-strong: #807366;
    --c-text: #F4EEE6; --c-muted: #A99F93;
    --c-accent: #FF8A5C; --c-accent-hover: #FFA27D; --c-accent-active: #FFB596;
    --c-on-accent: #1A120C; --c-accent-tint: #3A2219;
    --c-accent2: #4DB8A7; --c-accent2-hover: #66C7B7; --c-accent2-active: #80D2C4;
    --c-on-accent2: #0E1F1C; --c-accent2-tint: #15302C;
    --c-danger: #FF8F80; --c-on-danger: #1A120C;
    --c-inverse: #F4EEE6; --c-on-inverse: #16130F;
    --c-handoff: #173F3A; --c-on-handoff: #F4EEE6; --c-on-handoff-muted: #BFD9D4; --c-handoff-fill: #43625C;
    --c-focus: #F4EEE6; --c-scrim: rgb(0 0 0 / 0.6);
    --sh-raise: 0 0 0 1px var(--c-line);
    --sh-sheet: 0 -1px 0 var(--c-line);
    --yaid-bg: #FFFFFF; --yaid-text: #000000;
  }
}

:root[data-theme="dark"],
[data-theme="dark"] {
  --c-bg: #16130F; --c-surface: #231E19; --c-surface-2: #2E2721;
  --c-line: #3A3129; --c-line-strong: #807366;
  --c-text: #F4EEE6; --c-muted: #A99F93;
  --c-accent: #FF8A5C; --c-accent-hover: #FFA27D; --c-accent-active: #FFB596;
  --c-on-accent: #1A120C; --c-accent-tint: #3A2219;
  --c-accent2: #4DB8A7; --c-accent2-hover: #66C7B7; --c-accent2-active: #80D2C4;
  --c-on-accent2: #0E1F1C; --c-accent2-tint: #15302C;
  --c-danger: #FF8F80; --c-on-danger: #1A120C;
  --c-inverse: #F4EEE6; --c-on-inverse: #16130F;
  --c-handoff: #173F3A; --c-on-handoff: #F4EEE6; --c-on-handoff-muted: #BFD9D4; --c-handoff-fill: #43625C;
  --c-focus: #F4EEE6; --c-scrim: rgb(0 0 0 / 0.6);
  --sh-raise: 0 0 0 1px var(--c-line);
  --sh-sheet: 0 -1px 0 var(--c-line);
  --yaid-bg: #FFFFFF; --yaid-text: #000000;
}

:root,
[data-theme] {
  --c-p1: var(--c-accent);  --c-on-p1: var(--c-on-accent);
  --c-p2: var(--c-accent2); --c-on-p2: var(--c-on-accent2);
  --sh-deck: 0 0 0 1px var(--c-line), 0 6px 0 -1px var(--c-surface), 0 6px 0 0 var(--c-line);
}

:root {
  --ff-ui: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-num: "Unbounded", "Onest", "Onest Fallback", system-ui, sans-serif;
  --ff-vkid: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  --ff-yaid: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;

  --vkid-bg: #FFFFFF; --vkid-text: #000000; --vkid-line: rgb(0 0 0 / 0.12);

  --t-display: 700 40px/44px var(--ff-num);
  --t-display-s: 700 24px/28px var(--ff-num);
  --t-countdown: 700 120px/1 var(--ff-num);
  --t-h1: 800 28px/32px var(--ff-ui);
  --t-h1-landing: 800 28px/32px var(--ff-ui);
  --t-h2: 700 22px/28px var(--ff-ui);
  --t-h3: 700 18px/24px var(--ff-ui);
  --t-question: 600 24px/30px var(--ff-ui);
  --t-question-scene: 600 32px/38px var(--ff-ui);
  --t-reveal: 600 20px/26px var(--ff-ui);
  --t-reveal-value: 700 20px/26px var(--ff-ui);
  --t-lead: 400 19px/28px var(--ff-ui);
  --t-body: 400 17px/24px var(--ff-ui);
  --t-option: 500 17px/22px var(--ff-ui);
  --t-button: 600 17px/20px var(--ff-ui);
  --t-small: 500 14px/20px var(--ff-ui);
  --t-meta: 600 12px/16px var(--ff-ui);
  --t-stamp: 800 13px/16px var(--ff-ui);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;

  --gutter: 16px; --col-game: 480px; --col-read: 680px; --container: 1120px;
  --tap: 44px; --tap-main: 52px;

  --d-instant: 100ms; --d-fast: 150ms; --d-base: 250ms; --d-slow: 400ms;
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-header: 10; --z-banner: 20; --z-sheet: 40; --z-handoff: 50; --z-toast: 60;
}

@media (min-width: 480px) {
  :root { --gutter: 20px; }
}

@media (min-width: 768px) {
  :root {
    --t-display: 700 56px/60px var(--ff-num);
    --t-display-s: 700 28px/32px var(--ff-num);
    --t-countdown: 700 160px/1 var(--ff-num);
    --t-h1-landing: 800 40px/44px var(--ff-ui);
    --t-h2: 700 26px/32px var(--ff-ui);
    --t-question: 600 28px/34px var(--ff-ui);
    --t-question-scene: 600 48px/56px var(--ff-ui);
    --t-lead: 400 20px/30px var(--ff-ui);
    --t-body: 400 17px/26px var(--ff-ui);
    --t-stamp: 800 16px/20px var(--ff-ui);
  }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}