/* CSS Variables - Ange Brand Design System */
:root {
    /* Ange Brand - Primary Colors */
    --primary: #CDD800;
    --primary-hover: #b8c200;
    --primary-opacity: #ecedcd;
    --black: #000000;
    --white: #ffffff;

    /* Alias with color- prefix for components */
    --color-primary: #CDD800;
    --color-primary-hover: #b8c200;
    --color-primary-opacity: #ecedcd;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #F2F2F2;
    --color-red: #dc3545;

    /* Secondary colors */
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #943506;
    --info: #17a2b8;
    --light: #F2F2F2;
    --dark: #000000;

    /* Neutral colors */
    --gray-50: #f8f9fa;
    --gray-100: #F2F2F2;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6b7280;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --border-color: #E2E8F0;

    /* Typography - SF Pro Display */
    --font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 14px;
    --line-height-base: 1.5;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    
    /* Login specific variables - Ange Brand */
    --login-primary-color: #CDD800;
    --login-primary-hover: #b8c200;
    --login-bg-image: url('/images/bg-login.png');
    --login-dark-bg: #000000;
    --login-light-bg: #ffffff;
    --login-card-bg: rgba(0, 0, 0, 0.5);
    --login-text-primary: #ffffff;
    --login-text-secondary: #ffffff;
    --login-border-color: #E2E8F0;
    --login-border-radius: 5px;
    --login-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --login-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --login-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --login-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}