:root {
    color-scheme: light;
    --font-heading: "Georgia", "Times New Roman", serif;
    --font-body: "Trebuchet MS", "Segoe UI Variable", "Segoe UI", sans-serif;
    --bg: #fffaf4;
    --bg-elevated: rgba(255, 255, 255, 0.82);
    --bg-strong: #fff;
    --bg-soft: rgba(255, 245, 232, 0.95);
    --surface: rgba(255, 255, 255, 0.72);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --stroke: rgba(36, 31, 24, 0.1);
    --stroke-strong: rgba(36, 31, 24, 0.2);
    --text: #241f18;
    --text-muted: #625b4f;
    --accent: #ff8d6b;
    --accent-strong: #ed5c35;
    --accent-soft: #ffd3bf;
    --secondary: #3d7eff;
    --secondary-soft: #c8d9ff;
    --highlight: #ffd85c;
    --success: #1f9f63;
    --danger: #c54c44;
    --shadow-soft: 0 12px 40px rgba(53, 37, 23, 0.08);
    --shadow-strong: 0 18px 48px rgba(53, 37, 23, 0.16);
    --radius-xs: 12px;
    --radius-sm: 18px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --max-width: 1240px;
    --transition: 220ms ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #12100d;
        --bg-elevated: rgba(27, 24, 19, 0.9);
        --bg-strong: #1b1813;
        --bg-soft: rgba(35, 30, 24, 0.94);
        --surface: rgba(30, 27, 21, 0.82);
        --surface-strong: rgba(35, 31, 24, 0.94);
        --stroke: rgba(255, 244, 224, 0.08);
        --stroke-strong: rgba(255, 244, 224, 0.16);
        --text: #fff4e0;
        --text-muted: #d0c2b0;
        --accent: #ff9a62;
        --accent-strong: #ff6e3f;
        --accent-soft: rgba(255, 154, 98, 0.16);
        --secondary: #8cb3ff;
        --secondary-soft: rgba(140, 179, 255, 0.18);
        --highlight: #ffd05d;
        --success: #6ed79c;
        --danger: #ff8f86;
        --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.24);
        --shadow-strong: 0 18px 48px rgba(0, 0, 0, 0.34);
    }
}