:root {
    /* =========================================
       1. BRAND & PRIMARY COLORS
       ========================================= */
    --color-primary: #214bc6;        /* Main brand blue */
    --color-primary-hover: #1b3985;  /* Button hover */
    --color-primary-light: #4e73df;  /* Active tabs, borders, secondary buttons */
    --color-primary-split: #052fa9;  /* Dropdown split buttons */
    --color-info: #36a4cc;           /* Used heavily for numbers, counters, and highlights */
    --color-info-light: #42ccfa;     /* Secondary edit buttons */

    /* =========================================
       2. STATUS COLORS (Success, Danger, Warning)
       ========================================= */
    /* Success (Greens) */
    --color-success: #17a673;        
    --color-success-alt: #1aa51d;    /* Used in time slots */
    --color-success-hover: #127914;
    
    /* Danger (Reds) */
    --color-danger: #e74a3b;         /* Standard danger */
    --color-danger-alt: #fe776b;     /* Used for some delete/remove buttons */
    --color-danger-hover: #e8746b;
    --color-danger-text: #ff0000;    /* Required asterisks */
    
    /* Warning (Oranges/Yellows) */
    --color-warning: #f4b619;        
    --color-warning-bold: #ef9624;   
    --color-warning-hover: #de8616;

    /* =========================================
       3. TEXT COLORS
       ========================================= */
    --text-main: #333333;            /* Standard body text */
    --text-dark: #242426;            /* Headings and dark emphasis */
    --text-muted: #858796;           /* Secondary text, placeholders */
    --text-light: #ffffff;           /* Text on dark buttons/backgrounds */
    --text-link: #0458ff;            /* Standard links */

    /* =========================================
       4. BACKGROUNDS & SURFACES
       ========================================= */
    --bg-body: #ffffff;              /* Standard background */
    --bg-light: #f3f5f6;             /* Table headers, light panels */
    --bg-lighter: #f5f5f5;           /* Input group addons, avatars */
    --bg-disabled: #efefefbf;        /* Disabled inputs */
    --bg-selected: #cbe8f6;          /* Selected row/item highlight */
    --bg-highlight: #fffca4;         /* Yellow table row highlight */

    /* =========================================
       5. BORDERS & SHADOWS
       ========================================= */
    --border-main: #e3e6f0;          /* Table borders, standard dividers */
    --border-input: #d1d3e2;         /* Form controls */
    --border-card: #caccd4;          /* Cards and panels */
    --border-dark: #a4a7a8;          /* Outline dark buttons */
    
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15); /* Used on your alerts and dropdowns */
}

/* =========================================
   MODERN RED THEME
   ========================================= */
[data-theme="modern-red"] {
    /* 1. BRAND & PRIMARY COLORS (Ruby/Rose palette) */
    --color-primary: #e11d48;        /* Rich Ruby Red */
    --color-primary-hover: #be123c;  /* Deep Crimson for hover states */
    --color-primary-light: #fb7185;  /* Soft rose for active tabs/borders */
    --color-primary-split: #9f1239;  /* Very deep red for split buttons */
    --color-info: #f43f5e;           /* Vibrant red-pink for counters/highlights */
    --color-info-light: #fda4af;     /* Light blush for secondary edit buttons */

    /* 2. STATUS COLORS */
    /* Success & Warning are tweaked to harmonize better with red */
    --color-success: #10b981;        /* Modern Emerald Green */
    --color-success-alt: #059669;    
    --color-success-hover: #047857;
    
    --color-danger: #ef4444;         /* Standard danger red */
    --color-danger-alt: #f87171;     
    --color-danger-hover: #dc2626;
    --color-danger-text: #dc2626;    
    
    --color-warning: #f59e0b;        /* Modern Amber */
    --color-warning-bold: #d97706;   
    --color-warning-hover: #b45309;

    /* 3. TEXT COLORS */
    --text-main: #374151;            /* Softer dark gray (less harsh than #333) */
    --text-dark: #111827;            /* Almost black for headings */
    --text-muted: #6b7280;           /* Modern gray for secondary text */
    --text-light: #ffffff;           
    --text-link: #e11d48;            /* Links match the primary red */

    /* 4. BACKGROUNDS & SURFACES */
    --bg-body: #ffffff;              /* Clean white base */
    --bg-light: #fff1f2;             /* Very subtle blush/rose tint for panels/headers */
    --bg-lighter: #ffe4e6;           /* Slightly darker blush for avatars/addons */
    --bg-disabled: #f3f4f6;          /* Clean gray for disabled states */
    --bg-selected: #fecdd3;          /* Soft rose highlight for selected rows */
    --bg-highlight: #ffe4e6;         /* Gentle red warning/highlight row */

    /* 5. BORDERS & SHADOWS */
    --border-main: #e5e7eb;          /* Modern clean gray borders */
    --border-input: #d1d5db;         
    --border-card: #fecaca;          /* Cards get a very faint red-tinted border */
    --border-dark: #9ca3af;          
    
    /* Warmer, softer shadows to fit the red aesthetic */
    --shadow-sm: 0 1px 3px 0 rgba(225, 29, 72, 0.05);
    --shadow-md: 0 .15rem 1.75rem 0 rgba(225, 29, 72, 0.08); 
}