:root {
    /* === Brand Colors === */
    --brand-primary:        #E8630A;   /* warm orange */
    --brand-primary-light:  #FF8C3A;
    --brand-primary-dark:   #C04F00;
    --brand-secondary:      #5C3D8F;   /* purple complement */
    --brand-secondary-light:#7B5AB0;

    /* === Neutrals === */
    --bg-app:               #F7F5F2;   /* warm off-white, not sterile */
    --bg-card:              #FFFFFF;
    --bg-sidebar:           #2D2235;   /* deep purple-gray */
    --text-primary:         #1E1A24;
    --text-secondary:       #6B6275;
    --text-muted:           #A89CB0;
    --border-subtle:        #E4DFF0;

    /* === Semantic === */
    --color-success:        #2E9E6B;
    --color-warning:        #F0B429;
    --color-danger:         #D94040;
    --color-info:           #3B82C4;

    /* === Spacing scale === */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;

    /* === Radius === */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  14px;

    /* === Shadows === */
    --shadow-card:   0 2px 8px rgba(30, 26, 36, 0.08);
    --shadow-raised: 0 4px 16px rgba(30, 26, 36, 0.14);
}