:root {
    --color-carbon: #0D1011;
    --color-graphite: #171B1C;
    --color-graphite-light: #202526;
    --color-offwhite: #F3F1EB;
    --color-white: #FFFFFF;
    --color-black: #121516;
    --color-signal: #B7F34A;
    --color-signal-dark: #4FAE79;
    --color-signal-ink: #1F6B43;
    --color-steel: #899294;
    --color-steel-dark: #3F4A4B;
    --color-border: rgba(243, 241, 235, 0.12);
    --color-border-dark: rgba(13, 16, 17, 0.14);

    --bg: var(--color-carbon);
    --bg-secondary: var(--color-graphite);
    --bg-elevated: var(--color-graphite-light);
    --bg-light: var(--color-offwhite);
    --text: var(--color-offwhite);
    --text-dark: var(--color-black);
    --muted: var(--color-steel);
    --accent: var(--color-signal);
    --accent-secondary: var(--color-signal-dark);
    --border: var(--color-border);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --container: 1440px;
    --header-h: 4.6rem;
    --gutter: clamp(1rem, 4vw, 3rem);
    --section-y: clamp(3.75rem, 7.2vw, 6.25rem);

    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-cta: 0 0 0 1px rgba(183, 243, 74, 0.28);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.section-light {
    --accent: var(--color-signal-ink);
    --accent-secondary: var(--color-signal-ink);
    --muted: var(--color-steel-dark);
    --text: var(--color-black);
    --border: var(--color-border-dark);
    --bg: var(--color-offwhite);
    --bg-secondary: #e6e2d8;
    --bg-elevated: #ded9cd;
}