:root {
    /* ========================================
       PRIMARY COLORS - Optimise Design System
       ======================================== */
    --color-primary: #0b7fb8;
    --color-secondary: #4dd0e1;
    --color-secondary-dark: #12c6de;
    --color-white: #ffffff;

    /* ========================================
       NEUTRAL COLORS
       ======================================== */
    --color-blues-dark: #003087;
    --color-blues-bright: #0072ce;
    --color-blues-light: #41b6e6;
    --color-blues-aqua: #00a9ce;

    --color-neutrals-black: #231f20;
    --color-neutrals-dark-grey: #425563;
    --color-neutrals-mid-grey: #768692;
    --color-neutrals-pale-grey: #e8edee;
    --color-neutrals-white: #ffffff;

    --color-greens-dark: #006747;
    --color-greens-green: #009639;
    --color-greens-light-green: #78be20;
    --color-greens-aqua-green: #00a499;

    --color-brand-text: #333333;

    --color-bg-light: #e3f6f9;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-600: #666666;
    --color-gray-700: #999999;
    --color-gray-900: #212121;

    --background-glass: rgba(255, 255, 255, 0.6);
    /* Legacy support */
    --color-white-background: var(--color-white);

    /* ========================================
       GRADIENTS
       ======================================== */
    --gradient-primary-horizontal: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
    --gradient-primary-horizontal-hover: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary-dark) 80%);
    --gradient-primary-diagonal: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #fefefe 100%);

    /* Legacy gradient - kept for backwards compatibility */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, #ffffff 100%);
    --gradient-background: linear-gradient(135deg, rgb(221, 247, 255) 0%, #ffffff 100%);

    /* ========================================
       HIGHLIGHT & ACCENT COLORS
       ======================================== */
    --color-highlights-purple: #330072;
    --color-highlights-dark-pink: #7c2855;
    --color-highlights-pink: #ae2573;
    --color-highlights-dark-red: #8a1538;
    --color-highlights-emergency-red: #da291c;
    --color-highlights-orange: #ed8b00;
    --color-highlights-warm-yellow: #ffb81c;
    --color-highlights-yellow: #fae100;
    --color-highlights-ambulance-yellow: #fae100;

    /* ========================================
       SPACING SYSTEM (8px base)
       ======================================== */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 1rem; /* 16px */
    --space-md: 1.5rem; /* 24px */
    --space-lg: 2rem; /* 32px */
    --space-xl: 3rem; /* 48px */
    --space-xxl: 4rem; /* 64px */

    /* Legacy support */
    --default-space: 1rem;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-xs: 0.25rem; /* 4px */
    --radius-sm: 1rem; /* 16px */
    --radius-md: 1.25rem; /* 20px */
    --radius-lg: 1.5rem; /* 24px */
    --radius-xl: 2.5rem; /* 40px */
    --radius-full: 50%; /* circular */

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-card: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    --shadow-button: 0 0.375rem 1rem rgba(11, 127, 184, 0.3);
    --shadow-subtle: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-family-primary: 'Frutiger', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-family-base: 'Frutiger', 'Arial', sans-serif;

    /* Legacy support */
    --default-font-family-base: 'Frutiger', 'Arial', sans-serif;

    /* Font Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.375rem; /* 22px */
    --font-size-2xl: 1.75rem; /* 28px */
    --font-size-3xl: 2rem; /* 32px */
    --font-size-4xl: 2.375rem; /* 38px */
    --font-size-5xl: 2.625rem; /* 42px */
    --font-size-6xl: 4rem; /* 64px */

    /* Font Weights */
    --font-weight-normal: normal;
    --font-weight-bold: bold;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease-out;

    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --z-index-base: 0;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ========================================
       COMPONENT SPECIFIC
       ======================================== */

    /* Buttons */
    --button-height-sm: 2.5rem; /* 40px */
    --button-height-md: 3rem; /* 48px */
    --button-height-lg: 4.375rem; /* 70px */
    --button-padding-x: 2.5rem; /* 40px */
    --button-padding-y: 1.25rem; /* 20px */

    /* Cards */
    --card-padding: 1.5rem;
    --card-border-radius: var(--radius-lg);

    /* Status Cards */
    --status-card-bg: var(--color-bg-light);
    --status-card-border: var(--color-secondary);

    /* Navigation */
    --nav-height: 3.75rem; /* 60px */
}