:root {
    /* Red / Error */
    --R50: #FEECEB;
    --R75: #FAB2AD;
    --R100: #F9928A;
    --R200: #F66358;
    --R300: #F44336;
    --R400: #AB2F26;
    --R500: #952921;
    --R300-rgb: 244, 67, 54;

    --R300-8: rgba(var(--R300-rgb), 0.08);
    --R300-16: rgba(var(--R300-rgb), 0.16);
    --R300-24: rgba(var(--R300-rgb), 0.24);
    --R300-32: rgba(var(--R300-rgb), 0.32);

    /* Blue / Base palette */
    --B50: #ECF6FE;
    --B75: #B2DAFB;
    --B100: #91CBF9;
    --B200: #62B4F7;
    --B300: #42A5F5;
    --B400: #2E73AC;
    --B500: #286595;
    --B300-rgb: 66, 165, 245;

    --B300-8: rgba(var(--B300-rgb), 0.08);
    --B300-16: rgba(var(--B300-rgb), 0.16);
    --B300-24: rgba(var(--B300-rgb), 0.24);
    --B300-32: rgba(var(--B300-rgb), 0.32);

    /* Green / Success */
    --G50: #EDF7EE;
    --G75: #B6DEB7;
    --G100: #97D19A;
    --G200: #6ABD6E;
    --G300: #4CAF50;
    --G400: #357A38;
    --G500: #2E6B31;
    --G300-rgb: 76, 175, 80;

    --G300-8: rgba(var(--G300-rgb), 0.08);
    --G300-16: rgba(var(--G300-rgb), 0.16);
    --G300-24: rgba(var(--G300-rgb), 0.24);
    --G300-32: rgba(var(--G300-rgb), 0.32);

    /* Yellow / Warning */
    --Y50: #FEF8E6;
    --Y75: #FAE299;
    --Y100: #F8D66F;
    --Y200: #F5C431;
    --Y300: #F3B807;
    --Y400: #AA8105;
    --Y500: #947004;
    --Y300-rgb: 243, 184, 7;

    --Y300-8: rgba(var(--Y300-rgb), 0.08);
    --Y300-16: rgba(var(--Y300-rgb), 0.16);
    --Y300-24: rgba(var(--Y300-rgb), 0.24);
    --Y300-32: rgba(var(--Y300-rgb), 0.32);

    /* Common RGB helpers */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
}

.light {
    /* Neutral */
    --NT0: #FFFFFF;
    --NT10: #F8F9FA;
    --NT20: #F0F1F3;
    --NT30: #E5E6E9;
    --NT40: #D9DADE;
    --NT50: #C7C7CA;
    --NT60: #B9BABD;
    --NT70: #AEAFB2;
    --NT80: #A1A1A6;
    --NT90: #939499;
    --NT100: #86878C;
    --NT200: #78797F;
    --NT300: #6B6C72;
    --NT400: #5F6168;
    --NT500: #52535B;
    --NT600: #474850;
    --NT700: #373941;
    --NT800: #292B35;

    --NT0-rgb: 255, 255, 255;
    --NT10-rgb: 248, 249, 250;
    --NT20-rgb: 240, 241, 243;
    --NT30-rgb: 229, 230, 233;
    --NT40-rgb: 217, 218, 222;
    --NT50-rgb: 199, 199, 202;
    --NT60-rgb: 185, 186, 189;
    --NT70-rgb: 174, 175, 178;
    --NT80-rgb: 161, 161, 166;
    --NT90-rgb: 147, 148, 153;
    --NT100-rgb: 134, 135, 140;
    --NT200-rgb: 120, 121, 127;
    --NT300-rgb: 107, 108, 114;
    --NT400-rgb: 95, 97, 104;
    --NT500-rgb: 82, 83, 91;
    --NT600-rgb: 71, 72, 80;
    --NT700-rgb: 55, 57, 65;
    --NT800-rgb: 41, 43, 53;

    --NT400-8: rgba(var(--NT400-rgb), 0.08);
    --NT400-16: rgba(var(--NT400-rgb), 0.16);
    --NT400-32: rgba(var(--NT400-rgb), 0.32);

    --NT200-8: rgba(var(--NT200-rgb), 0.08);
    --NT200-16: rgba(var(--NT200-rgb), 0.16);

    --NT600-16: rgba(var(--NT600-rgb), 0.16);
    --NT600-32: rgba(var(--NT600-rgb), 0.32);

    --NT700-32: rgba(var(--NT700-rgb), 0.32);
    --NT20-32: rgba(var(--NT20-rgb), 0.32);

    /* Navigation glass */
    --navigation-glass-bg: rgba(var(--white-rgb), 0.32);
    --navigation-glass-bg-soft: rgba(var(--white-rgb), 0.14);
    --navigation-glass-border: rgba(var(--white-rgb), 0.58);
    --navigation-glass-highlight: rgba(var(--white-rgb), 0.62);
    --navigation-glass-shadow: rgba(var(--NT800-rgb), 0.18);
    --navigation-glass-inner-shadow: rgba(var(--white-rgb), 0.24);

    --navigation-glass-rim: rgba(var(--white-rgb), 0.72);
    --navigation-glass-rim-soft: rgba(var(--white-rgb), 0.34);
    --navigation-glass-ambient: rgba(var(--white-rgb), 0.22);

    --navigation-fade-start: rgba(var(--NT10-rgb), 0.96);
    --navigation-fade-mid: rgba(var(--NT10-rgb), 0.56);
    --navigation-fade-end: rgba(var(--NT10-rgb), 0);

    --navigation-glass-sheen: rgba(var(--white-rgb), 0.18);
    --navigation-glass-sheen-soft: rgba(var(--white-rgb), 0.04);
}

.dark {
    /* Neutral */
    --NT0: #1E202A;
    --NT10: #292B35;
    --NT20: #373941;
    --NT30: #474850;
    --NT40: #52535B;
    --NT50: #5F6168;
    --NT60: #6B6C72;
    --NT70: #78797F;
    --NT80: #86878C;
    --NT90: #939499;
    --NT100: #A1A1A6;
    --NT200: #AEAFB2;
    --NT300: #B9BABD;
    --NT400: #C7C7CA;
    --NT500: #E2E2E3;
    --NT600: #EDEDEE;
    --NT700: #F6F6F6;
    --NT800: #FBFBFB;

    --NT0-rgb: 30, 32, 42;
    --NT10-rgb: 41, 43, 53;
    --NT20-rgb: 55, 57, 65;
    --NT30-rgb: 71, 72, 80;
    --NT40-rgb: 82, 83, 91;
    --NT50-rgb: 95, 97, 104;
    --NT60-rgb: 107, 108, 114;
    --NT70-rgb: 120, 121, 127;
    --NT80-rgb: 134, 135, 140;
    --NT90-rgb: 147, 148, 153;
    --NT100-rgb: 161, 161, 166;
    --NT200-rgb: 174, 175, 178;
    --NT300-rgb: 185, 186, 189;
    --NT400-rgb: 199, 199, 202;
    --NT500-rgb: 226, 226, 227;
    --NT600-rgb: 237, 237, 238;
    --NT700-rgb: 246, 246, 246;
    --NT800-rgb: 251, 251, 251;

    --NT400-8: rgba(var(--NT400-rgb), 0.08);
    --NT400-16: rgba(var(--NT400-rgb), 0.16);
    --NT400-32: rgba(var(--NT400-rgb), 0.32);

    --NT200-8: rgba(var(--NT200-rgb), 0.08);
    --NT200-16: rgba(var(--NT200-rgb), 0.16);

    --NT600-16: rgba(var(--NT600-rgb), 0.16);
    --NT600-32: rgba(var(--NT600-rgb), 0.32);

    --NT700-32: rgba(var(--NT700-rgb), 0.32);
    --NT20-32: rgba(var(--NT20-rgb), 0.32);

    /* Navigation glass */
    --navigation-glass-bg: rgba(var(--NT10-rgb), 0.48);
    --navigation-glass-bg-soft: rgba(var(--white-rgb), 0.035);
    --navigation-glass-border: rgba(var(--NT700-rgb), 0.12);
    --navigation-glass-highlight: rgba(var(--white-rgb), 0.07);
    --navigation-glass-shadow: rgba(var(--black-rgb), 0.48);
    --navigation-glass-inner-shadow: rgba(var(--white-rgb), 0.04);

    --navigation-glass-rim: rgba(var(--NT700-rgb), 0.16);
    --navigation-glass-rim-soft: rgba(var(--NT700-rgb), 0.04);
    --navigation-glass-ambient: rgba(var(--white-rgb), 0.04);

    --navigation-glass-sheen: rgba(var(--white-rgb), 0.055);
    --navigation-glass-sheen-soft: rgba(var(--white-rgb), 0.018);

    --navigation-fade-start: rgba(var(--NT0-rgb), 0.98);
    --navigation-fade-mid: rgba(var(--NT0-rgb), 0.68);
    --navigation-fade-end: rgba(var(--NT0-rgb), 0);
}