/* EY Design System - CSS Custom Properties */

:root {
    /* Primary Colors */
    --ey-black: #2E2E38;
    --ey-yellow: #FFE600;
    --ey-white: #FFFFFF;
    
    /* Logo Colors */
    --ey-logo-bg-color: var(--ey-black);
    --ey-logo-beam-color: var(--ey-yellow);
    --ey-logo-letter-color: var(--ey-white);
    
    /* Text Colors */
    --text-primary: #2E2E38;
    --text-secondary: #656579;
    --text-tertiary: #9897A6;
    --text-link: #2E2E38;
    --text-link-alt: #0F69AE;
    
    /* Border Colors */
    --border-primary: #E6E6E9;
    --border-secondary: #C3C3CB;
    --border-tertiary: #D7D7DC;
    
    /* Background Colors */
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-gray: #E6E6E9;
    --bg-dark: #2E2E38;
    
    /* Button Colors - Primary */
    --btn-primary-bg: var(--ey-black);
    --btn-primary-color: var(--ey-white);
    --btn-primary-hover-bg: #1A1A24;
    --btn-primary-icon-color: #AFAEBA;
    
    /* Button Colors - Ghost */
    --btn-ghost-icon-color: #656579;
    --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
    --btn-ghost-active-bg: #D7D7DC;
    
    /* Header Colors */
    --header-bg-color: var(--bg-white);
    --header-border-color: var(--border-primary);
    
    /* Footer Colors */
    --footer-bg-color: var(--bg-white);
    --footer-border-color: var(--border-primary);
    --footer-text-color: var(--text-secondary);
    
    /* Sidebar Colors */
    --sidebar-bg-color: var(--bg-white);
    --sidebar-border-color: var(--border-primary);
    --sidebar-item-icon-color: #656579;
    --sidebar-item-hover-bg: rgba(0, 0, 0, 0.05);
    --sidebar-item-active-bg: #D7D7DC;
    
    /* Input Colors */
    --input-bg-color: var(--bg-white);
    --input-border-color: var(--border-secondary);
    --input-border-focus-color: var(--ey-black);
    --input-label-color: var(--text-secondary);
    --input-placeholder-color: #9897A6;
    --input-icon-color: #9897A6;
    
    /* Card Colors */
    --card-bg-color: var(--bg-white);
    --card-border-color: var(--border-primary);
    --card-header-color: var(--text-primary);
    
    /* Status Colors */
    --status-success: #4CAF50;
    --status-warning: #FF9800;
    --status-error: #F44336;
    --status-info: #2196F3;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    
    /* Typography */
    --font-family: 'EYInterstate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode support (optional, for future enhancement) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Can add dark mode overrides here if needed */
    }
}