:root {
    /* === Neutrals: warm Nordic cream === */
    --paper: #FBF6EC;
    --paper-deep: #F4ECDC;
    --paper-soft: #FFFDF7;
    --surface: #FFFFFF;
    --ink: #14121C;
    --ink-soft: #2B2738;
    --ink-muted: #6F6979;
    --ink-faint: #A8A2B2;
    --line: #E9E1CF;
    --line-soft: rgba(20, 18, 28, 0.06);

    /* === Brand ink colors (saturated, for text/icons/borders) === */
    --pink: #FF4FBE;
    --pink-deep: #C81F8E;
    --purple: #7B5CFF;
    --purple-deep: #4F31D9;
    --blue: #3DA9FC;
    --blue-deep: #1E72C8;
    --mint: #2DD4BF;
    --mint-deep: #0E9A8A;
    --leaf: #5EDB7F;
    --leaf-deep: #2A9D4C;
    --sun: #FFC93C;
    --sun-deep: #C99100;
    --coral: #FF8A5C;
    --coral-deep: #D85A2A;

    /* === Brand pastels (for tinted surfaces / cards) === */
    --pink-pastel: #FFE4F4;
    --purple-pastel: #ECE5FF;
    --blue-pastel: #DFEEFF;
    --mint-pastel: #D8F6F0;
    --leaf-pastel: #DFF6E4;
    --sun-pastel: #FFF1C9;
    --coral-pastel: #FFE3D2;

    /* === Compatibility shims (legacy variable names still in use) === */
    --black: var(--ink);
    --black-bis: var(--ink-soft);
    --grey-dark: var(--ink-soft);
    --grey: var(--ink-muted);
    --grey-light: var(--ink-faint);
    --white-bis: var(--paper-deep);
    --white: var(--surface);

    --red: var(--coral);
    --orange: var(--coral);
    --yellow: var(--sun);
    --yellow-bis: var(--sun-pastel);
    --lime: var(--leaf);
    --green: var(--leaf);
    --cyan: var(--mint);
    --light-blue: var(--blue-pastel);
    --dark-blue: var(--blue-deep);
    --violet-bis: var(--purple-pastel);

    /* === Derived semantic tokens === */
    --page-background: var(--paper);
    --background: var(--paper-deep);
    --border: var(--line);

    --text: var(--ink-soft);
    --text-strong: var(--ink);
    --text-light: var(--ink-muted);
    --text-muted: var(--ink-muted);

    --primary: var(--pink);
    --primary-invert: var(--surface);
    --secondary: var(--purple);
    --secondary-invert: var(--surface);

    --subtitle-color: var(--ink-muted);
    --title-color: var(--ink);
    --list-color: var(--purple);

    --shadow: rgba(20, 18, 28, 0.12);
    --shadow-soft: rgba(20, 18, 28, 0.06);
    --shadow-lift: 0 24px 64px -24px rgba(20, 18, 28, 0.22), 0 2px 8px -2px rgba(20, 18, 28, 0.08);
    --shadow-hover: 0 32px 80px -24px rgba(123, 92, 255, 0.28), 0 4px 12px -2px rgba(20, 18, 28, 0.1);

    /* === Signature gradients === */
    --gradient-aurora: linear-gradient(135deg, #FF4FBE 0%, #7B5CFF 50%, #3DA9FC 100%);
    --gradient-sunrise: linear-gradient(135deg, #FF8A5C 0%, #FFC93C 50%, #2DD4BF 100%);
    --gradient-northern: linear-gradient(135deg, #2DD4BF 0%, #7B5CFF 50%, #FF4FBE 100%);
    --gradient-meadow: linear-gradient(135deg, #5EDB7F 0%, #2DD4BF 50%, #3DA9FC 100%);
    --gradient-bloom: linear-gradient(135deg, #FFE4F4 0%, #ECE5FF 50%, #DFEEFF 100%);

    /* === Type === */
    --font-display: "Playfair Display", "Georgia", serif;
    --font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

    /* === Motion === */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);

    /* === Radii === */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* === Spacing === */
    --section-padding: 2rem;
    --container-max-width: 80rem;
}

@media screen and (min-width: 600px) {
    :root {
        --section-padding: 3rem;
    }
}

@media screen and (min-width: 1000px) {
    :root {
        --section-padding: 5rem;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --section-padding: 6.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}