:root {
    --cream-lightest: #fff9f1;
    --cream-lighter: #fffdfa;
    --cream-medium: #f9f3eb;
    --cream-dark: #f4ece1;
    --warm-grey: #f2ece3;
    --grey: #e2dbd1;
    --black: #212121;
    --ink: #111111;
    --dark-grey: #585756;
    --med-grey: #6e665b;
    --navy: #0c3166;
    --navy-darker: #0c213f;
    --brand-blue: #007aff;
    --grey-blue: #809ac0;
    --highlighter: #d6fc3c;
    --highlighter-soft: #e8fd7e;

    --danger: #c74848;
    --danger-soft: #fbe9e9;
    --warning: #c9841f;
    --warning-soft: #fbf0dc;
    --success: #2fb560;
    --success-soft: #e1f5e8;
    --success-deep: #1f6a3d;

    --bg-canvas: var(--cream-lightest);
    --bg-surface: var(--cream-medium);
    --bg-sunken: var(--cream-dark);
    --bg-hero: var(--warm-grey);

    --text-primary: var(--black);
    --text-body: var(--dark-grey);
    --text-muted: var(--med-grey);
    --text-inverse: var(--cream-lightest);

    --border-hairline: var(--black);
    --border-subtle: var(--grey);

    --accent-text: var(--navy);

    --font-display: "PolySans Bulky", "Arial Black", system-ui, sans-serif;
    --font-ui: "PolySans Median", "Inter", -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

    --fs-display-xl: clamp(2.75rem, 4.5vw + 1rem, 4.5rem);
    --fs-display-l:  clamp(2.25rem, 3vw + 1rem, 3rem);
    --fs-display-m:  clamp(1.75rem, 2vw + 0.75rem, 2.25rem);
    --fs-h1:         1.875rem;
    --fs-h2:         1.5rem;
    --fs-h3:         1.25rem;
    --fs-h4:         1.125rem;
    --fs-body:       0.9375rem;
    --fs-small:      0.8125rem;
    --fs-caption:    0.6875rem;

    --lh-display: 0.98;
    --lh-heading: 1.15;
    --lh-body:    1.55;
    --lh-compact: 1.35;

    --tracking-display: -0.022em;
    --tracking-heading: -0.01em;
    --tracking-body:    0;
    --tracking-caps:    0.08em;
    --tracking-eyebrow: 0.14em;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 3.75rem;
    --space-9: 5rem;
    --space-10: 7rem;

    --radius-xs: 0.375rem;
    --radius-s:  0.75rem;
    --radius-m:  1rem;
    --radius-l:  1.5rem;
    --radius-pill: 20rem;

    --border-w: 1px;
    --border-w-emphasis: 1.5px;

    --ring-focus: 0 0 0 2px var(--cream-lightest), 0 0 0 4px var(--highlighter);

    --t-fast:   120ms;
    --t-base:   180ms;
    --t-slow:   280ms;
    --t-enter:  240ms;
    --e-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --e-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

    --container-narrow: 30rem;
    --container-reading: 44rem;
    --container-wide: 72rem;
    --container-full: 88rem;

    --z-base: 1;
    --z-sticky: 50;
    --z-overlay: 90;
    --z-modal: 100;
    --z-toast: 120;
}

[data-theme="dark"] {
    --cream-lightest: #212121;
    --cream-lighter:  #272727;
    --cream-medium:   #2c2c2c;
    --cream-dark:     #353535;
    --warm-grey:      #1a1a1a;
    --grey:           #3e3e3e;

    --accent-text: var(--text-primary);

    --black: #fff9f1;
    --dark-grey: rgba(255, 249, 241, 0.82);
    --med-grey:  rgba(255, 249, 241, 0.55);

    --text-primary: #fff9f1;
    --text-body:    rgba(255, 249, 241, 0.82);
    --text-muted:   rgba(255, 249, 241, 0.55);
    --text-inverse: #fff9f1;

    --border-hairline: rgba(255, 249, 241, 0.14);
    --border-subtle:   rgba(255, 249, 241, 0.07);

    --bg-canvas:  #212121;
    --bg-surface: #2c2c2c;
    --bg-sunken:  #161616;
    --bg-hero:    #1a1a1a;

    --ring-focus: 0 0 0 2px #212121, 0 0 0 4px var(--highlighter);

    --danger-soft:  rgba(199, 72, 72, 0.18);
    --warning-soft: rgba(201, 132, 31, 0.18);
    --success-soft: rgba(47, 181, 96, 0.18);

    --grey-blue: rgba(255, 249, 241, 0.18);
}

[data-theme="dark"] .launch-hero-action .launch-button:not(:disabled) {
    background: var(--highlighter);
    color: var(--ink);
    border-color: var(--highlighter);
}
[data-theme="dark"] .launch-hero-action .launch-button:not(:disabled):hover {
    background: #fff9f1;
    color: var(--ink);
    border-color: #fff9f1;
    box-shadow: 0 6px 18px -6px rgba(214, 252, 60, 0.4);
}
[data-theme="dark"] .launch-hero-action .launch-button:disabled {
    background: rgba(255, 249, 241, 0.08);
    border-color: rgba(255, 249, 241, 0.12);
    color: rgba(255, 249, 241, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t-base: 0ms;
        --t-slow: 0ms;
        --t-enter: 0ms;
    }
}