/* =====================================================
   HELIX DESIGN SYSTEM - CSS CUSTOM PROPERTIES
   Centralized design tokens for consistent theming
   ===================================================== */

:root {
    /* =====================================================
       PRIMARY BRAND COLORS - Helix Teal Palette
       ===================================================== */
    --helix-teal-10: #E5F6F7;
    --helix-teal-20: #CCF0F2;
    --helix-teal-30: #98E5EC;
    --helix-teal-40: #7FDAE3;
    --helix-teal-50: #5CC9D0;   /* Primary accent/cyan */
    --helix-teal-60: #3ABCC5;
    --helix-teal-70: #1AAFBA;
    --helix-teal-80: #0A8E99;
    --helix-teal-90: #056D78;   /* Primary brand color */
    --helix-teal-100: #044B52;

    /* =====================================================
       PINK/MAGENTA PALETTE - Accent Colors
       ===================================================== */
    --helix-pink-10: #FFE5F2;
    --helix-pink-20: #FFCCE6;
    --helix-pink-30: #FFAAD5;
    --helix-pink-40: #FF80C2;
    --helix-pink-50: #FF4DA8;
    --helix-pink-60: #E30072;   /* Primary pink/accent */
    --helix-pink-70: #C20062;
    --helix-pink-80: #A10052;
    --helix-pink-90: #81003F;   /* Visited link color */
    --helix-pink-100: #5C002D;

    /* =====================================================
       NEUTRAL PALETTE - Grays (Updated per Helix Button Specs)
       ===================================================== */
    --helix-neutral-0: #FFFFFF;
    --helix-neutral-05: #F8F9FA;  /* Secondary button default */
    --helix-neutral-10: #F1F3F5;  /* Secondary button hover, disabled fill */
    --helix-neutral-15: #F0F0F0;
    --helix-neutral-20: #E9ECEF;  /* Secondary button pressed */
    --helix-neutral-25: #DCDCDC;
    --helix-neutral-30: #D0D0D0;
    --helix-neutral-40: #C8C8C8;
    --helix-neutral-50: #ADB5BD;  /* Disabled text/icon */
    --helix-neutral-60: #828282;
    --helix-neutral-70: #646464;
    --helix-neutral-80: #495057;  /* Ghost button hover */
    --helix-neutral-85: #3C3C3C;
    --helix-neutral-90: #343A40;  /* Ghost button default, Universal grey */
    --helix-neutral-100: #212529; /* Text, Secondary button text */
    
    /* =====================================================
       RED PALETTE - Danger/Warning Buttons
       ===================================================== */
    --helix-red-40: #FF6B6B;  /* Danger hover */
    --helix-red-50: #FA5252;  /* Danger default */
    --helix-red-60: #F03E3E;  /* Danger pressed */
    
    /* =====================================================
       BLUE PALETTE - Focus States
       ===================================================== */
    --helix-blue-70: #4C6EF5;  /* Focus ring color */

    /* =====================================================
       SEMANTIC COLORS - Status & Feedback
       ===================================================== */
    /* Success */
    --helix-success: #1EDF92;
    --helix-success-light: #E6FBF2;
    --helix-success-dark: #0DB06F;

    /* Warning */
    --helix-warning: #FFE066;
    --helix-warning-light: #FFF8E0;
    --helix-warning-dark: #E6B800;

    /* Danger/Error */
    --helix-danger: #E22D38;
    --helix-danger-light: #FDE9EA;
    --helix-danger-dark: #A00000;

    /* Info */
    --helix-info: #5CC9D0;
    --helix-info-light: #E5F6F7;
    --helix-info-dark: #056D78;

    /* =====================================================
       FUNCTIONAL COLORS - UI Elements
       ===================================================== */
   /* Links - HELIX Compliant */
   --helix-link: #056D78;           /* Teal 90 */
   --helix-link-visited: #056D78;   /* Keep teal for visited */
   --helix-link-hover: #3ABCC5;     /* Teal 70 - hover */
   --helix-link-hover-bg: transparent;
   --helix-link-hover-text: #3ABCC5;

   /* Inverse Links (on dark backgrounds) */
   --helix-link-inverse: #98E5EC;
   --helix-link-inverse-visited: #7FDAE3;
   --helix-link-inverse-hover: #5CC9D0;  /* Teal 50 */

   /* Buttons - Primary CTA uses Teal 80 per Helix */
   --helix-btn-primary-bg: #1B838B;      /* Helix Teal 80 */
   --helix-btn-primary-text: #FFFFFF;
   --helix-btn-primary-hover-bg: #3ABCC5; /* Helix Teal 70 */
    --helix-btn-default-bg: #2F4051;
    --helix-btn-default-text: #FFFFFF;
    
    /* Checkbox & Radio - ENT-6015, ENT-6016 */
    --helix-checkbox-checked: #1B838B;
    --helix-radio-checked: #1B838B;

    /* Focus States */
    --helix-focus-ring: #5CC9D0;
    --helix-focus-ring-width: 3px;

    /* =====================================================
       TYPOGRAPHY
       ===================================================== */
    --helix-font-family: 'Gilroy', Verdana, sans-serif;
    --helix-font-family-mono: 'Inconsolata', Consolas, "Andale Mono", "Lucida Console", Monaco, monospace;
    
    /* Font Weights */
    --helix-font-thin: 100;
    --helix-font-ultralight: 200;
    --helix-font-light: 300;
    --helix-font-regular: 400;
    --helix-font-medium: 500;
    --helix-font-semibold: 600;
    --helix-font-bold: 700;
    --helix-font-extrabold: 800;
    --helix-font-black: 900;

    /* Font Sizes */
    --helix-text-xs: 0.75rem;    /* 12px */
    --helix-text-sm: 0.8125rem;  /* 13px */
    --helix-text-base: 1rem;     /* 16px */
    --helix-text-md: 1.125rem;   /* 18px */
    --helix-text-lg: 1.25rem;    /* 20px */
    --helix-text-xl: 1.375rem;   /* 22px */
    --helix-text-2xl: 1.5rem;    /* 24px */
    --helix-text-3xl: 2rem;      /* 32px */

    /* Line Heights */
    --helix-leading-tight: 1.25;
    --helix-leading-snug: 1.375;
    --helix-leading-normal: 1.5;
    --helix-leading-relaxed: 1.625;

    /* =====================================================
       SPACING
       ===================================================== */
    --helix-space-1: 0.25rem;   /* 4px */
    --helix-space-2: 0.5rem;    /* 8px */
    --helix-space-3: 0.75rem;   /* 12px */
    --helix-space-4: 1rem;      /* 16px */
    --helix-space-5: 1.25rem;   /* 20px */
    --helix-space-6: 1.5rem;    /* 24px */
    --helix-space-8: 2rem;      /* 32px */
    --helix-space-10: 2.5rem;   /* 40px */

    /* =====================================================
       BORDERS & RADIUS
       ===================================================== */
    --helix-border-color: rgba(0, 0, 0, 0.15);
    --helix-border-color-light: rgba(0, 0, 0, 0.1);
    --helix-border-radius-sm: 4px;
    --helix-border-radius: 8px;
    --helix-border-radius-lg: 12px;
    --helix-border-radius-pill: 9999px;

    /* =====================================================
       SHADOWS
       ===================================================== */
    --helix-shadow-sm: 2px 2px 2px rgba(0, 0, 0, 0.05);
    --helix-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    --helix-shadow-md: 4px 4px 8px rgba(0, 0, 0, 0.25);
    --helix-shadow-lg: 2px 2px 10px rgba(0, 0, 0, 0.5);

    /* =====================================================
       Z-INDEX SCALE
       ===================================================== */
    --helix-z-dropdown: 1000;
    --helix-z-sticky: 1020;
    --helix-z-fixed: 1030;
    --helix-z-modal-backdrop: 1040;
    --helix-z-modal: 1050;
    --helix-z-popover: 1060;
    --helix-z-tooltip: 1070;

    /* =====================================================
       COMPONENT-SPECIFIC TOKENS
       ===================================================== */
    /* Navbar */
    --helix-navbar-bg: #056D78;
    --helix-navbar-text: #FFFFFF;
    --helix-navbar-height: 80px;
    --helix-navbar-height-sm: 60px;

    /* Panels */
    --helix-panel-bg: #FFFFFF;
    --helix-panel-header-bg: #2F4051;
    --helix-panel-header-text: #FFFFFF;

    /* Tables */
    --helix-table-header-bg: #056D78;
    --helix-table-header-text: #FFFFFF;
    --helix-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --helix-table-hover-bg: rgba(0, 0, 0, 0.05);

    /* Forms */
    --helix-input-border: #C8C8C8;
    --helix-input-focus-border: #5CC9D0;
    --helix-input-bg: #FFFFFF;

    /* Footer */
    --helix-footer-bg: #056D78;
    --helix-footer-text: #FFFFFF;
    --helix-footer-height: 45px;

    /* =====================================================
       AVATAR COMPONENT
       Reference: helixui.com/avatar
       ===================================================== */
    --helix-avatar-bg: #5CC9D0;
    --helix-avatar-text: #FFFFFF;
    --helix-avatar-border: #FFFFFF;
    
    /* Avatar Sizes */
    --helix-avatar-xs: 24px;
    --helix-avatar-sm: 32px;
    --helix-avatar-md: 40px;
    --helix-avatar-lg: 56px;
    --helix-avatar-xl: 80px;
    --helix-avatar-xxl: 120px;

    /* Avatar Status Colors */
    --helix-avatar-online: #1EDF92;
    --helix-avatar-offline: #6B7D8A;
    --helix-avatar-busy: #E22D38;
    --helix-avatar-away: #FFE066;

    /* =====================================================
       FOUNDATIONS
       Reference: helixui.com/foundations
       ===================================================== */
    
    /* Spacing Scale (4px base) */
    --helix-space-0: 0;
    --helix-space-1: 4px;
    --helix-space-2: 8px;
    --helix-space-3: 12px;
    --helix-space-4: 16px;
    --helix-space-5: 24px;
    --helix-space-6: 32px;
    --helix-space-7: 48px;
    --helix-space-8: 64px;

    /* Border Radius */
    --helix-radius-none: 0;
    --helix-radius-sm: 4px;
    --helix-radius-md: 8px;
    --helix-radius-lg: 12px;
    --helix-radius-xl: 16px;
    --helix-radius-full: 9999px;

    /* Shadows */
    --helix-shadow-sm: 0 1px 2px 0 rgba(47, 64, 81, 0.05);
    --helix-shadow: 0 1px 3px 0 rgba(47, 64, 81, 0.1), 0 1px 2px -1px rgba(47, 64, 81, 0.1);
    --helix-shadow-md: 0 4px 6px -1px rgba(47, 64, 81, 0.1), 0 2px 4px -2px rgba(47, 64, 81, 0.1);
    --helix-shadow-lg: 0 10px 15px -3px rgba(47, 64, 81, 0.1), 0 4px 6px -4px rgba(47, 64, 81, 0.1);
    --helix-shadow-xl: 0 20px 25px -5px rgba(47, 64, 81, 0.1), 0 8px 10px -6px rgba(47, 64, 81, 0.1);

    /* Transitions */
    --helix-transition-fast: 0.1s ease-in-out;
    --helix-transition: 0.15s ease-in-out;
    --helix-transition-slow: 0.3s ease-in-out;

    /* Z-Index Scale */
    --helix-z-dropdown: 1000;
    --helix-z-sticky: 1020;
    --helix-z-fixed: 1030;
    --helix-z-modal-backdrop: 1040;
    --helix-z-modal: 1050;
    --helix-z-popover: 1060;
    --helix-z-tooltip: 1070;
}

/* =====================================================
   DARK MODE SUPPORT (Future-proofing)
   ===================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override variables for dark mode if needed in the future */
    }
}