:root {
    color-scheme: light;
}

:root:has(input[value="dark"]:checked),
:root:has(input[value="dim"]:checked) {
    color-scheme: dark;
}

body {
    /* Light — morning sky */
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #0b1633;

    --c-content: #141a2e;
    --c-action: #0d42c2;

    --c-bg: #eef2f9;

    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;

    --saturation: 150%;

    --text-secondary: #3a4660;
    --c-error: #962218;

    /* How much of the canvas colour glass surfaces carry, for legible text over the fields */
    --panel-tint: 30%;

    --gradient-bg1: rgb(243, 246, 253);
    --gradient-bg2: rgb(229, 236, 250);
    --gradient-color1: 168, 208, 255;
    --gradient-color2: 104, 164, 242;
    --gradient-color3: 138, 146, 236;
    --gradient-color4: 172, 226, 250;
    --gradient-color5: 148, 184, 240;
    --gradient-intensity: 1;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-glide: cubic-bezier(0.7, 0, 0.2, 1);
    --ease-theme: cubic-bezier(1, 0.0, 0.4, 1);

    --font-mono: 'SF Mono', Menlo, 'JetBrains Mono', Consolas, monospace;

    --glass-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
            inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
            inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
            inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
            inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
            inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
            inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
            inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
            0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
            0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    --glass-shadow-button:
            inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 12%), transparent),
            inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
            inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
            inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
            inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
            inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
            0px 4px 12px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
            0px 8px 24px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);

    --glass-shadow-hover:
            inset 0 0 0 1px color-mix(in srgb, var(--c-action) 30%, transparent),
            inset 2px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 100%), transparent),
            0px 6px 16px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
            0px 12px 32px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    /* The liquid thumb inside glass capsules (theme switcher, skills) */
    --glass-shadow-thumb:
            inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
            inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
            inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
            inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
            inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
            inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
            0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    /* Neutral elevation that keeps light-on-color text legible over the moving blobs */
    --text-shadow-soft:
            0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent),
            0 2px 10px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
}

body:has(input[value="dark"]:checked) {
    /* Dark — midnight */
    --c-glass: #aab4c8;
    --c-light: #fff;
    --c-dark: #000;

    --c-content: #eef3fb;
    --c-action: #45d6ff;

    --c-bg: #0c1020;

    --glass-reflex-dark: 2;
    --glass-reflex-light: 0.3;

    --saturation: 150%;

    --text-secondary: #c0cadc;
    --c-error: #ff9a92;

    --panel-tint: 50%;

    --gradient-bg1: rgb(8, 12, 26);
    --gradient-bg2: rgb(14, 16, 30);
    --gradient-color1: 20, 146, 196;
    --gradient-color2: 26, 70, 200;
    --gradient-color3: 72, 58, 170;
    --gradient-color4: 22, 128, 160;
    --gradient-color5: 22, 40, 100;
    --gradient-intensity: 0.8;
}

body:has(input[value="dim"]:checked) {
    /* Dim — dusk */
    --c-light: #99deff;
    --c-dark: #20001b;
    --c-glass: hsl(318 42% 72%);

    --c-content: #f6f1fa;
    --c-action: #ffa3d5;

    --c-bg: #1a1830;

    --glass-reflex-dark: 2;
    --glass-reflex-light: 0.7;

    --saturation: 160%;

    --text-secondary: #ddd0ea;
    --c-error: #ffa39c;

    --panel-tint: 58%;

    --gradient-bg1: rgb(24, 22, 46);
    --gradient-bg2: rgb(36, 20, 48);
    --gradient-color1: 150, 56, 124;
    --gradient-color2: 116, 92, 196;
    --gradient-color3: 70, 60, 172;
    --gradient-color4: 178, 96, 148;
    --gradient-color5: 92, 52, 132;
    --gradient-intensity: 0.62;
}