:root {
    --brand-50:  #fbeef0;   /* near-white rose  (login gradient, light-menu select) */
    --brand-100: #f5dde0;   /* light rose       (menu-select-color, tab hover) */
    --brand-200: #e6b8bd;   /* soft rose        (chip/badge borders) */
    --brand-300: #cf8790;   /* medium rose      (focus outline) */
    --brand-500: #9e2f3d;   /* input outline / mid */
    --brand-600: #7c2431;   /* PRIMARY buttons, tabs, active, form controls — dark wine */
    --brand-700: #5e1a25;   /* primary hover / active underline — darker wine */
    
    --danger:       #ef4444;   /* was #dc2626 — a touch brighter/purer so delete "pops" vs the dark primary */
    --danger-hover: #dc2626;

    --button-toggle-active: #d9bfc4;   /* was #c7cbe0 (blue-grey) → rose-grey */
    --shadow-sm: 0 1px 2px rgba(60, 20, 26, .06);   /* warm-tint the shadows (were blue-tinted 23,26,60) */
    --shadow-md: 0 2px 6px rgba(60, 20, 26, .08), 0 12px 32px rgba(60, 20, 26, .10);
    --shadow-lg: 0 8px 24px rgba(60, 20, 26, .14), 0 24px 64px rgba(60, 20, 26, .16);
}