:root {
    --yellow-gold: rgb(255, 215, 0);
    --yellow-brown: rgb(139, 101, 8);
    --yellow-dark: #6A4A07;
    --yellow-orange: rgb(184, 134, 11);
    
    /* --cyan-neon: cyan;
    --cyan-dark: rgb(4, 161, 161);
    --cyan-darker: rgb(0, 80, 80);
    --cyan-dno: rgb(0, 173, 173); */

    /* --cyan-neon: #8C4BBF;
    --cyan-dark: #68347F;
    --cyan-darker: #3F1F66;
    --cyan-dno: #532A73; */

    --custom-black: color-mix(in srgb, var(--color-primary), black 95%);
    --custom-white: color-mix(in srgb, var(--color-primary), white 95%);
    --custom-grey: color-mix(in srgb, var(--color-primary), grey 95%);
    --custom-light-grey: color-mix(in srgb, var(--color-primary), lightgrey 95%);
    --error: red;
    --success: green;
    
    /* --color-primary: var(--cyan-neon);
    --color-secondary: var(--cyan-dark);
    --color-tertiary: var(--cyan-darker);
    --color-quaternary: var(--cyan-dno); */
    
    --color-primary: var(--yellow-gold);
    --color-secondary: var(--yellow-brown);
    --color-tertiary: var(--yellow-dark);
    --color-quaternary: var(--yellow-orange);

    
    --color-black: var(--color-primary-even-darker);
    --color-white: var(--color-primary-lighter);
}

/* Optional: Dark Mode Theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* --color-primary: #2980b9; */
    }
}