/* ==========================================================
   BA.UI Design System - Variables
   Version: 2.0
   ========================================================== */

:root {
    /* ==========================================
       Control Tokens
       ========================================== */
    --ba-control-height: 48px;
    --ba-control-radius: 999px;
    --ba-control-radius-sm: 12px;
    --ba-control-radius-md: 16px;
    --ba-control-radius-lg: 20px;

    /* ==========================================
       Color Palette - Primary
       ========================================== */
    --ba-primary: #304FFE;
    --ba-primary-hover: #1a3be0;
    --ba-primary-light: rgba(48, 79, 254, 0.08);
    --ba-primary-border: rgba(48, 79, 254, 0.2);

    /* ==========================================
       Color Palette - Danger (Red)
       ========================================== */
    --ba-danger: #E53935;
    --ba-danger-hover: #c62828;
    --ba-danger-light: rgba(229, 57, 53, 0.08);
    --ba-danger-border: rgba(229, 57, 53, 0.2);

    /* ==========================================
       Color Palette - Success (Green)
       ========================================== */
    --ba-success: #2E7D32;
    --ba-success-hover: #1b5e20;
    --ba-success-light: rgba(46, 125, 50, 0.08);
    --ba-success-border: rgba(46, 125, 50, 0.2);

    /* ==========================================
       Color Palette - Warning (Orange)
       ========================================== */
    --ba-warning: #F57C00;
    --ba-warning-hover: #E65100;
    --ba-warning-light: rgba(245, 124, 0, 0.08);
    --ba-warning-border: rgba(245, 124, 0, 0.2);

    /* ==========================================
       Color Palette - Info (Blue)
       ========================================== */
    --ba-info: #0288D1;
    --ba-info-hover: #01579B;
    --ba-info-light: rgba(2, 136, 209, 0.08);
    --ba-info-border: rgba(2, 136, 209, 0.2);

    /* ==========================================
       Color Palette - Dark
       ========================================== */
    --ba-dark: #1A1A1A;
    --ba-dark-hover: #333333;
    --ba-dark-light: rgba(26, 26, 26, 0.08);
    --ba-dark-border: rgba(26, 26, 26, 0.2);

    /* ==========================================
       Color Palette - Neutral / Gray
       ========================================== */
    --ba-gray-50: #FAFAFA;
    --ba-gray-100: #F5F5F5;
    --ba-gray-200: #EEEEEE;
    --ba-gray-300: #E0E0E0;
    --ba-gray-400: #BDBDBD;
    --ba-gray-500: #9E9E9E;
    --ba-gray-600: #757575;
    --ba-gray-700: #616161;
    --ba-gray-800: #424242;
    --ba-gray-900: #212121;

    /* ==========================================
       Text Colors
       ========================================== */
    --ba-text-primary: #2F3542;
    --ba-text-secondary: #667085;
    --ba-text-muted: #98A2B3;
    --ba-text-disabled: #BDBDBD;
    --ba-text-inverse: #FFFFFF;

    /* ==========================================
       Background Colors
       ========================================== */
    --ba-bg-primary: #FFFFFF;
    --ba-bg-secondary: #F8FAFC;
    --ba-bg-tertiary: #F1F5F9;
    --ba-bg-elevated: #FFFFFF;
    --ba-bg-overlay: rgba(0, 0, 0, 0.5);

    /* ==========================================
       Border Colors
       ========================================== */
    --ba-border-light: #E4E8EF;
    --ba-border-default: #D9DDE5;
    --ba-border-dark: #C4CAD4;
    --ba-border-divider: #EDF1F5;

    /* ==========================================
       Shadow Tokens
       ========================================== */
    --ba-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ba-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --ba-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.06);
    --ba-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.1);
    --ba-shadow-focus: 0 0 0 3px rgba(48, 79, 254, 0.12);

    /* ==========================================
       Transition Tokens
       ========================================== */
    --ba-transition-fast: 0.15s ease;
    --ba-transition-normal: 0.2s ease;
    --ba-transition-slow: 0.3s ease;

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

    /* ==========================================
       Spacing Scale
       ========================================== */
    --ba-space-1: 4px;
    --ba-space-2: 8px;
    --ba-space-3: 12px;
    --ba-space-4: 16px;
    --ba-space-5: 20px;
    --ba-space-6: 24px;
    --ba-space-8: 32px;
    --ba-space-10: 40px;
    --ba-space-12: 48px;
}


@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro'), url(/fonts/SourceSansPro-Light.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro'), url(/fonts/SourceSansPro-Regular.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local('Source Sans Pro'), url(/fonts/SourceSansPro-SemiBold.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: local('Source Sans Pro'), url(/fonts/SourceSansPro-Bold.woff2) format('woff2');
    font-display: swap;
}