:root {
    color-scheme: dark;

    --color-canvas: #090B0A;
    --color-canvas-secondary: #0D100E;
    --color-surface-01: #121613;
    --color-surface-02: #181D1A;
    --color-surface-elevated: #1E2420;
    --color-logo-green: #00FF01;
    --color-accent: #20E857;
    --color-accent-hover: #34F06A;
    --color-accent-pressed: #16C949;
    --color-accent-dark: #0D9E38;
    --color-text-primary: #F4F7F4;
    --color-text-secondary: #ADB5AF;
    --color-text-muted: #788079;
    --color-text-disabled: #565D58;
    --color-text-on-accent: #071009;
    --color-error: #FF6262;
    --color-warning: #F2BE5C;
    --color-info: #6DA8FF;
    --color-success: var(--color-accent);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.13);
    --border-accent: rgba(32, 232, 87, 0.32);
    --border-divider: rgba(255, 255, 255, 0.06);

    --font-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-display: clamp(2.75rem, 2rem + 3vw, 5.5rem);
    --text-h1: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
    --text-h2: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --text-h3: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
    --text-body: 1rem;
    --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-label: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --line-heading: 1.08;
    --line-body: 1.65;
    --tracking-heading: -0.03em;
    --tracking-label: 0.12em;

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;
    --space-144: 144px;
    --space-160: 160px;

    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --duration-fast: 140ms;
    --duration-base: 200ms;
    --duration-smooth: 350ms;
    --duration-reveal: 650ms;

    --container-max: 1280px;
    --container-wide-max: 1440px;
    --page-padding: var(--space-16);
    --section-spacing: var(--space-80);
    --panel-padding: var(--space-24);
    --button-height-small: 44px;
    --button-height-medium: 48px;
    --button-height-large: 56px;
    --focus-width: 2px;
    /* Header inner height (64/80px) plus its 1px border. */
    --site-header-height: 65px;
    --anchor-scroll-offset: calc(var(--site-header-height) + var(--space-16));
}

@media (min-width: 1024px) {
    :root {
        --site-header-height: 81px;
    }
}