:root {
    /* ======= BRAND COLORS ======= */
    --color-accent: #4A6CF7;
    --color-accent-light: #6F88FF;
    --color-accent-dark: #2D47C9;

    /* ======= BACKGROUND SYSTEM ======= */
    --color-bg: #181A20;
    /* main background */
    --color-bg-secondary: #1F222B;
    /* cards / panels */
    --color-bg-tertiary: #262A35;
    /* subtle separators */
    --color-bg-hover: #20242E;
    /* hover states */

    /* ======= TEXT COLORS ======= */
    --color-text: #F1F3F7;
    /* primary text */
    --color-text-muted: #B2B7C3;
    /* secondary text */
    --color-text-disabled: #6C7180;
}