:root {
    /* Base colors */
    --white: #FFFFFF;
    --primary-blue: #142a4a;
    --accent-blue: #22b1e3;

    /* Sidebar */
    --sidebar-hover: #1b355a;

    /* Stat card backgrounds */
    --card-peach: #fff3e6;
    --card-blue: #e5f1ff;
    --card-pink: #fdf0f7;
    --card-cyan: #e6f9fa;

    /* Text colors */
    --text-dark: #0A1D38;
    --text-heading: #1a1a1a;
    --text-secondary: #4A5568;
    --text-muted: #475569;
    --text-placeholder: #94A3B8;

    /* Background colors */
    --bg-light: #F8FAFC;
    --bg-lighter: #f8f9fa;

    /* Border colors */
    --border-color: #e2e8f0;
    --border-color-soft: #e8eaf0;
    --border-color-alpha: rgba(20, 46, 83, 0.1);
    --border-color-alpha-xs: rgba(20, 46, 83, 0.05);
    --border-color-alpha-md: rgba(20, 46, 83, 0.25);
    --border-color-alpha-focus: rgba(20, 46, 83, 0.15);
    --input-border-color: #142E53;

    /* Focus ring */
    --focus-ring: rgba(42, 178, 228, 0.2);

    /* Badge backgrounds */
    --badge-success-bg: #D9FFEA;
    --badge-danger-bg: #FFD7CA;
    --badge-pending-bg: #FFF3CD;
    --badge-load-bg: #E8E0FF;
    --badge-redeem-bg: #D6EFFF;

    /* Shared semantic badge color palette
       Used by: fleet chips, badge-status-sm, audit event badges */
    --green-badge-bg:    #dcfce7;   /* online / created  */
    --green-badge-text:  #166534;
    --green-dot:         #22c55e;   /* stat-sub-dot / fleet chip dot */

    --red-badge-bg:      #fee2e2;   /* offline / deleted */
    --red-badge-text:    #991b1b;
    --red-dot:           #ef4444;

    --amber-badge-bg:    #fef3c7;   /* maintenance / warning */
    --amber-badge-text:  #92400e;
    --amber-dot:         #f59e0b;

    --purple-badge-bg:   #ede9fe;   /* sensitive */
    --purple-badge-text: #5b21b6;

    --cyan-badge-bg:     #cffafe;   /* info */
    --cyan-badge-text:   #155e75;

    --blue-badge-bg:     #dbeafe;   /* default / updated */
    --blue-badge-text:   #1e3a8a;

    /* Neutral gray (offline indicators, muted icons) */
    --color-neutral: #9e9e9e;

    /* Semantic status colors */
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-danger: #E53E3E;
    --bg-danger-light: #FFF5F5;

    /* Subtle background */
    --bg-subtle: #f1f5f9;

    /* Image picker hover */
    --img-picker-hover-border: #c7d2e8;
    --img-picker-hover-bg: #f0f4ff;

    /* Pagination */
    --pagination-disabled-color: #b0b8c9;

    /* Border radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-badge: 20px;

    /* Font sizes */
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.9rem;
    --font-size-label: 13px;

    /* Shadows — elevation */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-popup: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-offcanvas: -10px 0 30px rgba(0, 0, 0, 0.05);
    --shadow-sidebar: 10px 0 30px rgba(0, 0, 0, 0.1);
    --shadow-sidebar-mobile: 10px 0 30px rgba(0, 0, 0, 0.2);

    /* Shadows — interactive (accent-tinted) */
    --shadow-btn-primary-hover: 0 6px 20px rgba(34, 177, 227, 0.45), 0 2px 8px rgba(20, 42, 74, 0.35);
    --shadow-btn-primary-active: 0 3px 10px rgba(34, 177, 227, 0.35), 0 1px 4px rgba(20, 42, 74, 0.25);
    --shadow-btn-outline-hover: 0 6px 10px rgba(34, 177, 227, 0.25), 0 2px 8px rgba(20, 42, 74, 0.15);
    --shadow-accent: 0 2px 8px rgba(34, 177, 227, 0.35);

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
}