:root {
    --color-light: #ffffff;
    --color-mid: #f6d137;
    --color-dark: #241536;

    --page-bg: var(--color-light);
    --surface: var(--color-light);
    --surface-soft: #f7f4f8;
    --text: var(--color-dark);
    --text-muted: #5d5267;
    --border: rgba(36, 21, 54, 0.18);

    --shadow:
        0 18px 45px rgba(36, 21, 54, 0.12);

    --shadow-soft:
        0 8px 24px rgba(36, 21, 54, 0.08);

    --focus: var(--color-mid);
    --link: var(--color-dark);
    --link-hover: #4c2a69;

    --content-max: 78rem;
    --content-narrow: 48rem;

    --gutter:
        clamp(1rem, 3vw, 2rem);

    --section-space:
        clamp(4rem, 8vw, 7.5rem);

    --radius-sm: 0.45rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.4rem;

    --font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-serif:
        Georgia,
        "Times New Roman",
        serif;

    --step--1:
        clamp(0.86rem, 0.84rem + 0.1vw, 0.94rem);

    --step-0:
        clamp(1rem, 0.97rem + 0.16vw, 1.08rem);

    --step-1:
        clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);

    --step-2:
        clamp(1.5rem, 1.32rem + 0.9vw, 2rem);

    --step-3:
        clamp(2rem, 1.6rem + 1.8vw, 3rem);

    --step-4:
        clamp(2.7rem, 2rem + 3vw, 4.8rem);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --page-bg: var(--color-dark);
    --surface: #2d1c40;
    --surface-soft: #352249;

    --text: var(--color-light);
    --text-muted: #ddd2e5;

    --border:
        rgba(255, 255, 255, 0.22);

    --shadow:
        0 18px 45px rgba(0, 0, 0, 0.32);

    --shadow-soft:
        0 8px 24px rgba(0, 0, 0, 0.24);

    --link: var(--color-light);
    --link-hover: var(--color-mid);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-bg: var(--color-dark);
        --surface: #2d1c40;
        --surface-soft: #352249;

        --text: var(--color-light);
        --text-muted: #ddd2e5;

        --border:
            rgba(255, 255, 255, 0.22);

        --shadow:
            0 18px 45px rgba(0, 0, 0, 0.32);

        --shadow-soft:
            0 8px 24px rgba(0, 0, 0, 0.24);

        --link: var(--color-light);
        --link-hover: var(--color-mid);

        color-scheme: dark;
    }
}