:root {
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Instrument Sans', system-ui, sans-serif;

    --nav-bar-height: 64px;

    --color-bg: #F2F1EC;
    --color-surface: #FBFAF7;
    --color-border: #E7E3D6;
    --color-accent: #C8871B;
    --color-accent-hover: #B0740F;
    --color-on-accent: #FFF8EA;
    --color-text-strong: #23211C;
    --color-text-muted: #6E6A5F;
    --color-text-subtle: #8B8678;

    --color-bulb-fill: #FBE6BC;
    --color-bulb-stroke: #C8871B;
    --color-bulb-cap-stroke: #23211C;
    --color-halo: rgba(200, 135, 27, .30);

    --color-surface-2: #FFFDF8;
    --color-correct-border: #3E7A4E;
    --color-correct-bg: #EDF4EE;
    --color-correct-text: #2C5C39;
    --color-wrong-border: #B0705C;
    --color-wrong-bg: #F7EDEA;
    --color-wrong-text: #8E4E3B;
    --color-explain-bg: #F7ECD6;
    --color-explain-border: #EBDCBC;
    --color-explain-text: #7A5210;

    --color-bulb-dim-fill: #EFEDE4;
    --color-bulb-dim-stroke: #C4C0B2;
    --color-bulb-dim-cap-stroke: #A9A497;
    --color-freeze-bg: #EEF0EC;
    --color-freeze-text: #5F6B5C;
    --color-unlock-chip-bg: #F5E6C6;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1D1B26;
        --color-surface: #262330;
        --color-border: #302C3C;
        --color-accent: #F4D793;
        --color-accent-hover: #FBE6B4;
        --color-on-accent: #221E12;
        --color-text-strong: #EDEAE1;
        --color-text-muted: #9791A4;
        --color-text-subtle: #7C748C;

        --color-bulb-fill: rgba(244, 215, 147, .20);
        --color-bulb-stroke: #F4D793;
        --color-bulb-cap-stroke: #7C748C;
        --color-halo: rgba(244, 215, 147, .26);

        --color-surface-2: #2B2836;
        --color-correct-border: #6FA37D;
        --color-correct-bg: #26312A;
        --color-correct-text: #A8D2B4;
        --color-wrong-border: #A2705F;
        --color-wrong-bg: #332831;
        --color-wrong-text: #E8B4A0;
        --color-explain-bg: #2A2536;
        --color-explain-border: #3E3550;
        --color-explain-text: #F4D793;

        --color-bulb-dim-fill: #2C2938;
        --color-bulb-dim-stroke: #4A4457;
        --color-bulb-dim-cap-stroke: #5C5569;
        --color-freeze-bg: #2E2B3B;
        --color-freeze-text: #A9C0C4;
        --color-unlock-chip-bg: #3A3348;
    }
}

:root[data-theme="dark"] {
    --color-bg: #1D1B26;
    --color-surface: #262330;
    --color-border: #302C3C;
    --color-accent: #F4D793;
    --color-accent-hover: #FBE6B4;
    --color-on-accent: #221E12;
    --color-text-strong: #EDEAE1;
    --color-text-muted: #9791A4;
    --color-text-subtle: #7C748C;

    --color-bulb-fill: rgba(244, 215, 147, .20);
    --color-bulb-stroke: #F4D793;
    --color-bulb-cap-stroke: #7C748C;
    --color-halo: rgba(244, 215, 147, .26);

    --color-surface-2: #2B2836;
    --color-correct-border: #6FA37D;
    --color-correct-bg: #26312A;
    --color-correct-text: #A8D2B4;
    --color-wrong-border: #A2705F;
    --color-wrong-bg: #332831;
    --color-wrong-text: #E8B4A0;
    --color-explain-bg: #2A2536;
    --color-explain-border: #3E3550;
    --color-explain-text: #F4D793;

    --color-bulb-dim-fill: #2C2938;
    --color-bulb-dim-stroke: #4A4457;
    --color-bulb-dim-cap-stroke: #5C5569;
    --color-freeze-bg: #2E2B3B;
    --color-freeze-text: #A9C0C4;
    --color-unlock-chip-bg: #3A3348;
}