/* ==================== ROOT VARIABLES ==================== */
:root {
    /* ==================== UNIFIED COLOR PALETTE ==================== */

    /* Primary Blue Scale - Based on #2596be */
    --primary-50: #f0f8ff;     /* Very light blue */
    --primary-100: #f0f8ff;    /* Light blue */
    --primary-200: #a1d4ff;    /* Soft blue */
    --primary-300: #5bb8ff;    /* Medium light blue */
    --primary-400: #2596be;    /* Base color - beautiful blue */
    --primary-500: #1e7ba1;    /* Main Primary - deeper version */
    --primary-600: #176585;    /* Medium dark blue */
    --primary-700: #104e69;    /* Dark blue */
    --primary-800: #0a384d;    /* Very dark blue */
    --primary-900: #042131;    /* Darkest blue */

    /* Secondary Blue Scale - Based on #338dba */
    --secondary-50: #f0f8ff;   /* Very light blue */
    --secondary-100: #f0f8ff;  /* Light blue */
    --secondary-200: #a1d4ff;  /* Soft blue */
    --secondary-300: #6cc0e6;  /* Medium light blue */
    --secondary-400: #338dba;  /* Blue complement */
    --secondary-500: #297195;  /* Main Secondary - blue */
    --secondary-600: #1f5570;  /* Medium dark blue */
    --secondary-700: #15394b;  /* Dark blue */
    --secondary-800: #0b1d26;  /* Very dark blue */
    --secondary-900: #020507;  /* Darkest blue */

    /* Accent Colors - Teal Variations */
    --accent-light: #d7e2eb;   /* Light blue tint */
    --accent-main: #06929d;    /* Main base color - teal */
    --accent-dark: #04636a;    /* Darker teal */

    /* Status Colors - Harmonious with Logo */
    --success-50: #f0f8ff;
    --success-100: #f0f8ff;
    --success-500: #2596be;    /* Primary blue */
    --success-600: #1e7ba1;
    --success-700: #176585;

    --warning-50: #f0f8ff;
    --warning-100: #f0f8ff;
    --warning-500: #338dba;    /* Secondary blue */
    --warning-600: #297195;
    --warning-700: #1f5570;

    --danger-50: #f0f8ff;
    --danger-100: #f0f8ff;
    --danger-500: #06929d;     /* Teal accent */
    --danger-600: #04636a;
    --danger-700: #033338;

    --info-50: #f0f8ff;
    --info-100: #f0f8ff;
    --info-500: #5bb8ff;      /* Light blue */
    --info-600: #338dba;
    --info-700: #1e7ba1;

    /* Neutral Gray Scale - Subtle Blue Tint from #2596be */
    --gray-50: #f0f8ff;       /* Very light with blue hint */
    --gray-100: #f0f8ff;      /* Light with blue hint */
    --gray-200: #a1d4ff;      /* Soft blue-gray */
    --gray-300: #5bb8ff;      /* Medium light blue-gray */
    --gray-400: #2596be;      /* Medium blue-gray - base color */
    --gray-500: #1e7ba1;      /* Balanced blue-gray */
    --gray-600: #176585;      /* Medium dark blue-gray */
    --gray-700: #104e69;      /* Dark blue-gray */
    --gray-800: #0a384d;      /* Very dark blue-gray */
    --gray-900: #042131;      /* Darkest blue-gray */

    /* Text Colors - Based on #2596be Scale */
    --text-primary: #042131;      /* Darkest blue for main text */
    --text-secondary: #104e69;    /* Dark blue for secondary text */
    --text-tertiary: #1e7ba1;     /* Medium blue for tertiary text */
    --text-light: #2596be;       /* Light blue for subtle text */
    --text-white: #ffffff;
    --text-black: #000000;

    /* Background Colors - Clean and Harmonious */
    --bg-white: #ffffff;
    --bg-light: #f0f8ff;         /* Very light blue tint */
    --bg-gray: #f0f8ff;          /* Light blue tint */
    --bg-dark: #042131;          /* Dark blue from scale */

    /* Border Colors - Subtle and Elegant */
    --border-light: #a1d4ff;
    --border-medium: #5bb8ff;
    --border-dark: #2596be;

    /* Special Dashboard Status Colors */
    --status-online: #4caf50;
    --status-offline: #f44336;
    --status-break1: #ffc107;
    --status-break2: #ff9800;
    --status-break3: #ff5722;
    --status-technical: #8b5fbf;
    --status-floater: #663399;
    --status-overtime: #7a4fb3;
    --status-restroom: #663399;

    /* ==================== UNIFIED DESIGN TOKENS ==================== */

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Shadows - Soft with #2596be Tint */
    --shadow-sm: 0 1px 2px 0 rgba(37, 150, 190, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(37, 150, 190, 0.12), 0 2px 4px -1px rgba(37, 150, 190, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(37, 150, 190, 0.12), 0 4px 6px -2px rgba(37, 150, 190, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(37, 150, 190, 0.12), 0 10px 10px -5px rgba(37, 150, 190, 0.06);
    --shadow-primary: 0 4px 6px -1px rgba(37, 150, 190, 0.18), 0 2px 4px -1px rgba(37, 150, 190, 0.12);

    /* Transitions - Smooth and Natural */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradients - Logo-Inspired */
    --gradient-primary: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-300), var(--secondary-500));
    --gradient-accent: linear-gradient(135deg, var(--accent-main), var(--accent-dark));
    --gradient-logo: linear-gradient(135deg, var(--secondary-300), var(--primary-500));
    --gradient-subtle: linear-gradient(135deg, var(--gray-50), var(--gray-100));

    /* ==================== DASHBOARD CARD COLORS ==================== */

    /* Card Background Colors */
    --card-bg-primary: var(--bg-white);
    --card-bg-secondary: var(--gray-50);
    --card-bg-accent: var(--secondary-50);

    /* Card Border Colors */
    --card-border: var(--border-light);
    --card-border-hover: var(--border-medium);
    --card-border-active: var(--primary-300);

    /* Card Text Colors */
    --card-title: var(--text-primary);
    --card-subtitle: var(--text-secondary);
    --card-value: var(--primary-600);
    --card-description: var(--text-tertiary);

    /* Stats Card Specific Colors - Harmonious with #c89cc4 */
    --stats-schedule-color: var(--primary-500);    /* Beautiful purple */
    --stats-absent-color: var(--danger-500);       /* Modern red */
    --stats-vacation-color: var(--warning-500);    /* Warm amber */
    --stats-online-color: var(--success-500);      /* Fresh green */

    /* ==================== LEGACY ALIASES (for backward compatibility) ==================== */

    /* Main Colors */
    --primary-color: var(--primary-500);
    --primary-light: var(--primary-300);
    --primary-dark: var(--primary-600);
    --primary-darker: var(--primary-700);
    --primary-lighter: var(--primary-100);

    --secondary-color: var(--secondary-100);
    --accent-color: var(--accent-main);

    /* Status Colors */
    --success-color: var(--success-500);
    --success-light: var(--success-50);
    --warning-color: var(--warning-500);
    --warning-light: var(--warning-50);
    --danger-color: var(--danger-500);
    --danger-light: var(--danger-50);
    --info-color: var(--info-500);

    /* Neutral Colors */
    --white: var(--bg-white);
    --black: var(--text-black);
    --dark-color: var(--gray-800);
    --gray-color: var(--gray-500);
    --gray-light: var(--gray-200);
    --light-color: var(--gray-100);
    --light-bg: var(--bg-light);
    --text-dark: var(--text-primary);
    --text-medium: var(--text-secondary);
    --text-light: var(--text-tertiary);
    --text-color: var(--gray-800);
    --border-color: var(--border-light);

    /* Design Tokens */
    --border-radius: var(--radius-lg);
    --border-radius-sm: var(--radius-sm);
    --border-radius-lg: var(--radius-xl);
    --shadow: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --transition: var(--transition-normal);

    /* ==================== PAGE-SPECIFIC ALIASES ==================== */

    /* All page-specific variables now use the unified color system */

    /* Settings Page */
    --settings-primary-color: var(--primary-500);
    --settings-primary-light: var(--primary-300);
    --settings-primary-dark: var(--primary-600);
    --settings-secondary-color: var(--secondary-100);
    --settings-accent-color: var(--accent-main);
    --settings-light-color: var(--gray-100);
    --settings-dark-color: var(--gray-800);
    --settings-white: var(--bg-white);
    --settings-success-color: var(--success-500);
    --settings-warning-color: var(--warning-600);
    --settings-danger-color: var(--danger-500);
    --settings-gray-color: var(--gray-400);
    --settings-text-dark: var(--text-primary);
    --settings-transition: var(--transition-normal);

    /* Reports Page */
    --reports-primary-color: var(--primary-500);
    --reports-primary-light: var(--primary-300);
    --reports-primary-dark: var(--primary-600);
    --reports-secondary-color: var(--secondary-100);
    --reports-accent-color: var(--accent-main);
    --reports-light-color: var(--gray-100);
    --reports-dark-color: var(--gray-800);
    --reports-success-color: var(--success-500);
    --reports-warning-color: var(--warning-600);
    --reports-danger-color: var(--danger-500);
    --reports-gray-color: var(--gray-400);
    --reports-white: var(--bg-white);
    --reports-shadow: var(--shadow-primary);
    --reports-transition: var(--transition-normal);
    --reports-border-radius: var(--radius-lg);
    --reports-border-color: var(--border-light);
    --reports-text-dark: var(--text-primary);
    --reports-text-medium: var(--text-secondary);
    --reports-text-light: var(--text-tertiary);

    /* Real-Time Dashboard */
    --rtd-main-color: var(--primary-500);
    --rtd-secondary-color: var(--primary-200);
    --rtd-online-color: var(--status-online);
    --rtd-offline-color: var(--status-offline);
    --rtd-break1-color: var(--status-break1);
    --rtd-break2-color: var(--status-break2);
    --rtd-break3-color: var(--status-break3);
    --rtd-technical-color: var(--status-technical);
    --rtd-floater-color: var(--status-floater);
    --rtd-overtime-color: var(--status-overtime);
    --rtd-restroom-color: var(--status-restroom);

    /* Interpreter Page */
    --interpreter-primary-color: var(--primary-500);
    --interpreter-primary-light: var(--primary-300);
    --interpreter-primary-dark: var(--primary-600);
    --interpreter-primary-darker: var(--primary-700);
    --interpreter-text-color: var(--gray-800);
    --interpreter-light-bg: var(--bg-light);

    /* Interpreter MTD Page */
    --interpreterMTD-primary-color: var(--primary-500);
    --interpreterMTD-primary-light: var(--primary-300);
    --interpreterMTD-primary-dark: var(--primary-600);
    --interpreterMTD-primary-darker: var(--primary-700);
    --interpreterMTD-text-color: var(--gray-800);
    --interpreterMTD-light-bg: var(--bg-light);

    /* Leader Page */
    --leader-primary-color: var(--primary-500);
    --leader-primary-light: var(--primary-300);
    --leader-primary-dark: var(--primary-600);
    --leader-primary-darker: var(--primary-700);
    --leader-text-color: var(--gray-800);
    --leader-light-bg: var(--bg-light);

    /* Fulfillment Page */
    --fulfillmentpage-primary-color: var(--primary-500);
    --fulfillmentpage-primary-light: var(--primary-200);
    --fulfillmentpage-primary-dark: var(--primary-600);
    --fulfillmentpage-primary-darker: var(--primary-700);
    --fulfillmentpage-primary-darkest: var(--primary-800);
    --fulfillmentpage-text-dark: var(--text-primary);
    --fulfillmentpage-text-light: var(--text-tertiary);
    --fulfillmentpage-bg-light: var(--secondary-100);
    --fulfillmentpage-bg-card: var(--bg-white);

    /* Leaves Page */
    --leaves-primary-color: var(--primary-500);
    --leaves-primary-light: var(--primary-300);
    --leaves-primary-dark: var(--primary-600);
    --leaves-secondary-color: var(--secondary-100);
    --leaves-accent-color: var(--accent-main);
    --leaves-light-color: var(--bg-light);
    --leaves-dark-color: var(--gray-700);
    --leaves-success-color: var(--success-500);
    --leaves-warning-color: var(--warning-600);
    --leaves-danger-color: var(--danger-500);
    --leaves-gray-color: var(--gray-400);
    --leaves-white: var(--bg-white);
    --leaves-shadow: var(--shadow-sm);
    --leaves-transition: var(--transition-normal);
    --leaves-border-radius: var(--radius-md);
    --leaves-border-color: var(--border-light);
    --leaves-text-dark: var(--gray-700);
    --leaves-text-medium: var(--text-secondary);
    --leaves-text-light: var(--text-tertiary);
    --leaves-bg-gradient: var(--gradient-primary);


}