:root {
    /* Base Colors */
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);

    /* Gray Scale */
    --gray: rgb(64, 64, 64);           /* Dark gray for text */
    --alt-gray: rgb(160, 160, 160);     /* Medium gray for borders */
    --bg-gray: rgb(246, 246, 246);      /* Light gray for backgrounds */

    /* Pink (Primary Brand) */
    --pink: rgb(255, 0, 122);           /* Vibrant pink */
    --alt-pink: rgb(255, 180, 215);     /* Soft pink for hovers */
    --bg-pink: rgb(255, 246, 237);      /* Very light pink background */

    /* Red (Error/Danger) */
    --red: rgb(255, 0, 0);
    --alt-red: rgb(255, 180, 180);
    --bg-red: rgb(255, 237, 237);

    /* Orange (Warning) */
    --orange: rgb(255, 64, 0);
    --alt-orange: rgb(255, 210, 180);
    --bg-orange: rgb(255, 246, 237);

    /* Yellow (Caution) */
    --yellow: rgb(255, 192, 0);
    --alt-yellow: rgb(255, 230, 180);
    --bg-yellow: rgb(255, 252, 237);

    /* Green (Success) */
    --green: rgb(0, 128, 64);
    --alt-green: rgb(180, 255, 215);
    --bg-green: rgb(237, 255, 246);

    /* Blue (Info) */
    --blue: rgb(0, 64, 255);
    --alt-blue: rgb(180, 210, 255);
    --bg-blue: rgb(237, 246, 255);

    /* Purple (Special) */
    --purple: rgb(128, 0, 255);
    --alt-purple: rgb(215, 180, 255);
    --bg-purple: rgb(246, 237, 255);

    /* Brown (Neutral/Docs theme) */
    --brown: rgb(139, 69, 19);
    --alt-brown: rgb(220, 190, 180);
    --bg-brown: rgb(252, 248, 246);
}

/* Dark theme (matches news.bubb.la gray palette) */
[data-theme="dark"] {
    --white: rgb(38, 38, 38);
    --black: rgb(170, 170, 170);
    --gray: rgb(120, 120, 120);
    --alt-gray: rgb(65, 65, 65);
    --bg-gray: rgb(32, 32, 32);

    --pink: rgb(255, 0, 122);
    --alt-pink: rgb(120, 40, 70);
    --bg-pink: rgb(22, 22, 22);

    --red: rgb(170, 170, 170);
    --alt-red: rgb(55, 55, 55);
    --bg-red: rgb(30, 22, 22);

    --orange: rgb(170, 170, 170);
    --alt-orange: rgb(55, 55, 55);
    --bg-orange: rgb(28, 26, 22);

    --yellow: rgb(170, 170, 170);
    --alt-yellow: rgb(55, 55, 55);
    --bg-yellow: rgb(28, 28, 22);

    --green: rgb(150, 150, 150);
    --alt-green: rgb(55, 55, 55);
    --bg-green: rgb(22, 30, 26);

    --blue: rgb(150, 150, 150);
    --alt-blue: rgb(55, 55, 55);
    --bg-blue: rgb(22, 26, 30);

    --purple: rgb(150, 150, 150);
    --alt-purple: rgb(55, 55, 55);
    --bg-purple: rgb(28, 22, 30);

    --brown: rgb(150, 150, 150);
    --alt-brown: rgb(55, 55, 55);
    --bg-brown: rgb(28, 26, 24);

    --box-shadow: var(--golden-xxs) var(--golden-xxs) var(--golden-s) rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* Auto: follow OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --white: rgb(38, 38, 38);
        --black: rgb(170, 170, 170);
        --gray: rgb(120, 120, 120);
        --alt-gray: rgb(65, 65, 65);
        --bg-gray: rgb(32, 32, 32);

        --pink: rgb(255, 0, 122);
        --alt-pink: rgb(120, 40, 70);
        --bg-pink: rgb(22, 22, 22);

        --red: rgb(170, 170, 170);
        --alt-red: rgb(55, 55, 55);
        --bg-red: rgb(30, 22, 22);

        --orange: rgb(170, 170, 170);
        --alt-orange: rgb(55, 55, 55);
        --bg-orange: rgb(28, 26, 22);

        --yellow: rgb(170, 170, 170);
        --alt-yellow: rgb(55, 55, 55);
        --bg-yellow: rgb(28, 28, 22);

        --green: rgb(150, 150, 150);
        --alt-green: rgb(55, 55, 55);
        --bg-green: rgb(22, 30, 26);

        --blue: rgb(150, 150, 150);
        --alt-blue: rgb(55, 55, 55);
        --bg-blue: rgb(22, 26, 30);

        --purple: rgb(150, 150, 150);
        --alt-purple: rgb(55, 55, 55);
        --bg-purple: rgb(28, 22, 30);

        --brown: rgb(150, 150, 150);
        --alt-brown: rgb(55, 55, 55);
        --bg-brown: rgb(28, 26, 24);

        --box-shadow: var(--golden-xxs) var(--golden-xxs) var(--golden-s) rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}