:root {
    /* ===== Foundation / Brand ===== */
    --color-primary-dark: #20313A;
    --color-primary-light: #FFFDFC;
    /* ===== Secondary ===== */
    --color-secondary-light: #E8DED7;
    --color-secondary-dark: #667781;
    /* ===== Background ===== */
    --bg-color-dark: #BEDBFF;
    --bg-color-light: #E6F1FF;
    /* ===== Surface / Cards ===== */
    --surface-card-default: #FFFDFC;
    --surface-card-accent-blue: #F3E8DF;
    --surface-card-accent-cyan: #44C7B6;
    --surface-card-accent-teal: #7AD9CC;
    /* ===== Text ===== */
    --text-dark: #20313A;
    --text-light: #FFFFFF;
    --text-muted-on-dark: #6B7B84;
    --text-muted-on-light: #667781;
    /* ===== Actions ===== */
    --cta-primary: #44C7B6;
    --cta-primary-text: #20313A;
    /* ===== Highlights / Premium ===== */
    --highlight-attention: #F28C6B;
    --highlight-premium: #A264F4;
    /* ===== States ===== */
    --state-success: #2FAE9C;
    --state-warning: #E6AE3A;
    --state-danger: #FF2056;
    /* ===== Hover / Glow ===== */
    --hover-glow-dark: #F3C783;
    --hover-glow-light: #44C7B6;
    /* ===== Legacy pop colors mapped to new system ===== */
    --bg-pop-blue: #D9EAF6;
    --bg-pop-cyan: #44C7B6;
    --bg-pop-teal: #73D8CA;
    --bg-pop-green: #05DF72;
    --bg-pop-violet: #A264F4;
    --bg-pop-orange: #F28C6B;
}