:root {
    color-scheme: light;

    --color-primary: #10b981;
    --color-primary-hover: #0ea574;
    --color-primary-active: #0c8c64;
    --color-primary-soft: #dff8ee;
    --color-on-primary: #052d21;

    --color-secondary: #10211c;
    --color-secondary-hover: #1b332b;
    --color-accent: #f2c94c;

    --color-background: #ffffff;
    --color-background-subtle: #f3f7f5;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-inverse: #07110e;

    --color-text: #10211c;
    --color-text-muted: #52645e;
    --color-text-subtle: #74847f;
    --color-text-inverse: #f1faf6;
    --color-border: #d7e1dd;
    --color-border-strong: #aebdb7;

    --color-success: #087a55;
    --color-success-soft: #ddf7ec;
    --color-warning: #98640c;
    --color-warning-soft: #fff4d6;
    --color-error: #c72c3b;
    --color-error-soft: #ffeaec;
    --color-focus: #0969da;
    --color-overlay: rgb(2 12 9 / 72%);

    --font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: clamp(1.75rem, 3vw, 2.5rem);
    --text-display: clamp(2.5rem, 4.2vw, 4.5rem);

    --leading-tight: 1.02;
    --leading-heading: 1.12;
    --leading-body: 1.65;
    --tracking-tight: -0.04em;
    --tracking-heading: -0.025em;
    --tracking-label: 0.09em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --container: 76rem;
    --container-narrow: 62rem;
    --gutter: clamp(1.25rem, 3vw, 2.5rem);
    --section-space: clamp(4.5rem, 7vw, 6.5rem);

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    --shadow-float: 0 1.25rem 3.75rem rgb(15 35 28 / 16%);
    --shadow-focus: 0 0 0 0.25rem rgb(9 105 218 / 20%);

    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #34d399;
    --color-primary-hover: #55dfac;
    --color-primary-active: #21b982;
    --color-primary-soft: #0c3227;
    --color-on-primary: #042219;

    --color-secondary: #edf8f3;
    --color-secondary-hover: #dbeae3;
    --color-accent: #f5d670;

    --color-background: #050807;
    --color-background-subtle: #0a100e;
    --color-surface: #0c1210;
    --color-surface-raised: #111a17;
    --color-surface-inverse: #eaf6f0;

    --color-text: #edf8f3;
    --color-text-muted: #aebdb7;
    --color-text-subtle: #82918b;
    --color-text-inverse: #07110e;
    --color-border: #24322d;
    --color-border-strong: #43564f;

    --color-success: #58d7a8;
    --color-success-soft: #0a2d23;
    --color-warning: #f1c75b;
    --color-warning-soft: #30270e;
    --color-error: #ff8d99;
    --color-error-soft: #39161c;
    --color-focus: #75b9ff;
    --color-overlay: rgb(0 0 0 / 82%);

    --shadow-float: 0 1.5rem 4rem rgb(0 0 0 / 44%);
    --shadow-focus: 0 0 0 0.25rem rgb(117 185 255 / 24%);
}

@media (max-width: 48rem) {
    :root {
        --section-space: 3.75rem;
    }
}