/* DeckScreen: central token registry. See docs/design/design-tokens.md. */
:root {
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --surface-page: var(--grad-161922);
  --surface-heading-accent: var(--color-action);
  --surface-showcase: var(--grad-18253b);
  --surface-scene: var(--grad-161922);
  --surface-handheld: var(--grad-181e1b);
  --surface-game-preview: var(--grad-14274e);
  --surface-feature: var(--grad-191e2d);
  --surface-feature-icon: var(--grad-161922);
  --surface-setup-preview: var(--grad-1c2945);
  --surface-app-icon: var(--grad-2b50ef);
  --surface-release: var(--grad-0047ab);
  --surface-dialog: var(--grad-161922);
  --shadow-action: 0 5px 24px #0047ab33;
  --shadow-showcase: 0 24px 64px #070b1b50;
  --shadow-tablet: 2px 8px 0 #414359,0 24px 40px #080b2177;
  --shadow-handheld: 5px 8px 0 #10121c,5px 20px 24px #080b2166;
  --shadow-app-icon: 0 20px 48px #2b50ef55;
  --shadow-controls: 1px 1px #737a6e;
  --filter-backdrop: blur(6px);
  --color-backdrop: #090c1bd9;
  --color-header-divider: #ffffff1c;
  --color-decoration: #ffffff10;
  --color-action: #59cafd;
  --color-orbit: #535097;
  --color-promo-edge: #7960ca;
  --color-link: #e1e7ff;
  --color-footer-link: #bbcafa;
  --color-brand-outline: #a9c6ff;
  --color-device-body: #252b29;
  --color-camera: #080d0b;
  --color-control: #101511;
  --color-text: #ffffff;
  --color-border: #535775;
  --color-intro: #c4c8e6;
  --color-cable: #a1aacc;
  --color-action-hover: #8cdcff;
  --color-highlight: #a9e5ff;
  --color-device-edge: #657263;
  --color-label: #bac6ea;
  --color-selected-text: #d2b7ff;
  --color-text-muted: #b5b9d0;
  --color-feature-border: #7651b3;
  --color-divider: #34364b;
  --color-operator: #a4b1da;
  --color-icon-border: #859ed9;
  --color-screen-edge: #101612;
  --color-border-active: #a286d5;
  --color-on-promo: #dce4ff;
  --color-action-text: #141827;
  --color-selected: #302453;
  --measure-1280px: 1280px;
  --measure-100dvh: 100dvh;
  --measure-1160px: 1160px;
  --measure-300px: 300px;
  --measure-440px: 440px;
  --measure-400px: 400px;
  --measure-360px: 360px;
  --measure-180px: 180px;
  --measure-560px: 560px;
  --measure-neg-40px: -40px;
  --measure-4_4vw: 4.4vw;
  --measure-480px: 480px;
  --measure-neg-64px: -64px;
  --measure-110px: 110px;
  --measure-200px: 200px;
  --measure-340px: 340px;
  --measure-240px: 240px;
  --measure-176px: 176px;
  --measure-100px: 100px;
  --measure-220px: 220px;
  --measure-212px: 212px;
  --measure-250px: 250px;
  --measure-16px: 16px;
  --measure-760px: 760px;
  --measure-68px: 68px;
  --measure-neg-6px: -6px;
  --measure-62px: 62px;
  --measure-18px: 18px;
  --measure-24px: 24px;
  --measure-neg-1px: -1px;
  --measure-28px: 28px;
  --measure-80px: 80px;
  --measure-44px: 44px;
  --measure-64px: 64px;
  --measure-14px: 14px;
  --measure-10px: 10px;
  --measure-42px: 42px;
  --measure-32px: 32px;
  --measure-78px: 78px;
  --measure-12px: 12px;
  --measure-90px: 90px;
  --measure-38px: 38px;
  --measure-neg-2px: -2px;
  --measure-40px: 40px;
  --measure-48px: 48px;
  --measure-20px: 20px;
  --measure-5px: 5px;
  --measure-2px: 2px;
  --measure-3px: 3px;
  --measure-1px: 1px;
  --measure-4px: 4px;
  --measure-8px: 8px;
  --measure-6px: 6px;
  --angle-orbit: -15deg;
  --angle-tablet: -7deg;
  --angle-disclosure-open: 45deg;
  --angle-handheld: 9deg;
  --motion-interactive: .2s;
  --art-sky-dark: #152c5a;
  --art-sky-mid: #9783d7;
  --art-sky-light: #bd8feb;
  --art-hill-light: #7951be;
  --art-hill-dark: #34234e;
  --art-moon: #a9e5ff;
  --art-mountain-back: #7874ae;
  --art-snow: #b5aceb;
  --art-mountain-mid: #685695;
  --art-river: #8f9fe5;
  --art-forest-back: #21345a;
  --art-forest-front: #182b4c;
  --art-traveler: #1b1835;
}

/* Semantic component aliases; primitives above preserve the declared scale and illustration geometry. */
:root {
  --app-icon-height-100: var(--measure-100px);
  --app-icon-span-right-20: var(--measure-20px);
  --app-icon-span-top-12: var(--measure-12px);
  --app-icon-width-100: var(--measure-100px);
  --button-hover-transform-neg-2: var(--measure-neg-2px);
  --cable-height-80: var(--measure-80px);
  --camera-height-4: var(--measure-4px);
  --camera-left-4: var(--measure-4px);
  --camera-width-4: var(--measure-4px);
  --closing-star-bottom-neg-64: var(--measure-neg-64px);
  --closing-star-left-neg-40: var(--measure-neg-40px);
  --concept-label-bottom-24: var(--measure-24px);
  --concept-label-left-16: var(--measure-16px);
  --concept-label-right-16: var(--measure-16px);
  --control-height-80: var(--measure-80px);
  --control-height-mobile-64: var(--measure-64px);
  --control-width-32: var(--measure-32px);
  --control-width-compact-24: var(--measure-24px);
  --control-width-mobile-24: var(--measure-24px);
  --control-width-stacked-32: var(--measure-32px);
  --device-scene-height-360: var(--measure-360px);
  --device-scene-height-compact-340: var(--measure-340px);
  --device-scene-height-mobile-300: var(--measure-300px);
  --device-scene-height-stacked-360: var(--measure-360px);
  --dialog-close-height-44: var(--measure-44px);
  --dialog-close-right-8: var(--measure-8px);
  --dialog-close-top-8: var(--measure-8px);
  --dialog-close-width-44: var(--measure-44px);
  --dialog-max-height-100dvh: var(--measure-100dvh);
  --dialog-max-height-48: var(--measure-48px);
  --dialog-width-32: var(--measure-32px);
  --dots-span-height-6: var(--measure-6px);
  --dots-span-width-6: var(--measure-6px);
  --eyebrow-span-height-6: var(--measure-6px);
  --eyebrow-span-width-6: var(--measure-6px);
  --feature-icon-height-48: var(--measure-48px);
  --feature-icon-width-48: var(--measure-48px);
  --feature-number-right-24: var(--measure-24px);
  --feature-number-top-24: var(--measure-24px);
  --focus-offset: var(--measure-5px);
  --step-size-app-glyph: var(--measure-90px);
  --step-size-body: var(--measure-16px);
  --step-size-caption: var(--measure-12px);
  --step-size-card: var(--measure-20px);
  --step-size-control: var(--measure-28px);
  --step-size-decoration: var(--measure-240px);
  --step-size-display: var(--measure-64px);
  --step-size-display-compact: var(--measure-42px);
  --step-size-heading: var(--measure-48px);
  --step-size-heading-mobile: var(--measure-32px);
  --step-size-heading-small: var(--measure-38px);
  --step-size-micro-art: var(--measure-10px);
  --step-size-ornament: var(--measure-40px);
  --step-size-small: var(--measure-14px);
  --step-size-step: var(--measure-18px);
  --step-size-subheading: var(--measure-24px);
  --game-ui-left-16: var(--measure-16px);
  --game-ui-right-16: var(--measure-16px);
  --game-ui-top-16: var(--measure-16px);
  --h1-font-size-4_4vw: var(--measure-4_4vw);
  --handheld-height-110: var(--measure-110px);
  --handheld-height-compact-100: var(--measure-100px);
  --handheld-height-mobile-90: var(--measure-90px);
  --handheld-height-stacked-110: var(--measure-110px);
  --handheld-top-212: var(--measure-212px);
  --handheld-top-compact-200: var(--measure-200px);
  --handheld-top-mobile-176: var(--measure-176px);
  --handheld-top-stacked-212: var(--measure-212px);
  --live-height-6: var(--measure-6px);
  --live-width-6: var(--measure-6px);
  --logo-height-28: var(--measure-28px);
  --logo-i-bottom-neg-6: var(--measure-neg-6px);
  --logo-i-height-2: var(--measure-2px);
  --logo-i-width-12: var(--measure-12px);
  --logo-width-32: var(--measure-32px);
  --mini-screen-height-78: var(--measure-78px);
  --mini-screen-height-compact-68: var(--measure-68px);
  --mini-screen-height-mobile-62: var(--measure-62px);
  --mini-screen-height-stacked-78: var(--measure-78px);
  --orbit-height-180: var(--measure-180px);
  --orbit-top-80: var(--measure-80px);
  --play-height-28: var(--measure-28px);
  --play-width-28: var(--measure-28px);
  --radius-app: var(--measure-24px);
  --radius-card: var(--measure-10px);
  --radius-dialog: var(--measure-16px);
  --radius-handheld: var(--measure-40px);
  --radius-icon: var(--measure-12px);
  --radius-panel: var(--measure-14px);
  --radius-screen: var(--measure-8px);
  --radius-small: var(--measure-6px);
  --radius-tablet: var(--measure-20px);
  --right-control-span-font-size-8: var(--measure-8px);
  --right-control-span-font-size-mobile-8: var(--measure-8px);
  --scene-caption-bottom-8: var(--measure-8px);
  --scene-caption-left-16: var(--measure-16px);
  --scene-caption-right-16: var(--measure-16px);
  --setup-label-left-16: var(--measure-16px);
  --setup-label-right-16: var(--measure-16px);
  --setup-label-top-24: var(--measure-24px);
  --setup-visual-min-height-440: var(--measure-440px);
  --setup-visual-min-height-stacked-400: var(--measure-400px);
  --skip-link-left-16: var(--measure-16px);
  --space-12: var(--measure-12px);
  --space-16: var(--measure-16px);
  --space-20: var(--measure-20px);
  --space-24: var(--measure-24px);
  --space-32: var(--measure-32px);
  --space-4: var(--measure-4px);
  --space-40: var(--measure-40px);
  --space-48: var(--measure-48px);
  --space-6: var(--measure-6px);
  --space-64: var(--measure-64px);
  --space-8: var(--measure-8px);
  --space-80: var(--measure-80px);
  --step-min-height-80: var(--measure-80px);
  --stroke-1: var(--measure-1px);
  --stroke-2: var(--measure-2px);
  --stroke-3: var(--measure-3px);
  --stroke-4: var(--measure-4px);
  --tablet-height-250: var(--measure-250px);
  --tablet-height-compact-220: var(--measure-220px);
  --tablet-height-mobile-200: var(--measure-200px);
  --tablet-height-stacked-250: var(--measure-250px);
  --tablet-top-28: var(--measure-28px);
  --tablet-top-mobile-24: var(--measure-24px);
  --target-comfortable: var(--measure-48px);
  --target-minimum: var(--measure-44px);
  --tracking-1: var(--measure-1px);
  --tracking-neg-1: var(--measure-neg-1px);
  --tracking-neg-2: var(--measure-neg-2px);
  --width-content: var(--measure-1160px);
  --width-narrow: var(--measure-760px);
  --width-page: var(--measure-1280px);
  --width-reading: var(--measure-480px);
  --width-showcase-stacked: var(--measure-560px);
}

:root {
  --leading-solid: 1;
  --leading-display: 1.08;
  --leading-heading: 1.15;
  --leading-subheading: 1.3;
  --leading-step: 1.4;
  --leading-compact: 1.5;
  --leading-body: 1.6;
  --leading-reading: 1.75;
  --leading-longform: 1.8;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --radius-round: 50%;
  --stroke-4: 4px;
}

:root {
  --grad-0047ab80: #0047ab80;
  --grad-25243b88: #25243b88;
  --grad-2b50ef22: #2b50ef22;
  --grad-330b7666: #330b7666;
  --grad-462c7680: #462c7680;
  --grad-8a2be22b: #8a2be22b;
  --grad-8a2be240: #8a2be240;
  --grad-8a2be24a: #8a2be24a;
  --grad-8a2be25c: #8a2be25c;
  --grad-0047ab: #0047ab;
  --grad-14274e: #14274e;
  --grad-161922: #161922;
  --grad-181e1b: #181e1b;
  --grad-18253b: #18253b;
  --grad-191e2d: #191e2d;
  --grad-1c2945: #1c2945;
  --grad-242238: #242238;
  --grad-243f67: #243f67;
  --grad-25213b: #25213b;
  --grad-253fc1: #253fc1;
  --grad-2b50ef: #2b50ef;
  --grad-330b76: #330b76;
  --grad-393e3c: #393e3c;
  --grad-7042af: #7042af;
  --grad-8970dd: #8970dd;
  --grad-8a2be2: #8a2be2;
  --grad-a895ee: #a895ee;
  --grad-bda1ff: #bda1ff;
  --angle-grad-100: 100deg;
  --angle-grad-120: 120deg;
  --angle-grad-135: 135deg;
  --angle-grad-145: 145deg;
  --angle-grad-155: 155deg;
  --angle-grad-160: 160deg;
  --measure-650px: 650px;

  --measure-52px: 52px;
  --measure-56px: 56px;
  --measure-72px: 72px;
  --measure-120px: 120px;
  --measure-128px: 128px;
  --measure-144px: 144px;
  --measure-420px: 420px;
  --measure-1440px: 1440px;
  --d-display: var(--measure-56px);
  --d-section: var(--measure-52px);
  --d-container: var(--measure-1440px);
  --d-photo: var(--measure-420px);
  --d-header: var(--measure-72px);
  --d-gap-hero: var(--measure-128px);
  --d-gap-s: var(--measure-120px);
  --d-gap: var(--measure-144px);
  --d-gap-l: var(--measure-176px);
  --d-paper: #161922;
  --d-paper-2: #1c2333;
  --d-ink: #e7eef8;
  --d-tracking: -0.02em;
}