/* ====================================================
   Global CSS Variables
   ====================================================
   
   This file contains all global color and design variables
   used across the entire application for consistency and
   easy maintenance.
   
   Usage: Include this file before any other CSS files
   ================================================== */

:root {
    /* =====================================
       Brand Colors
       ===================================== */
    --brand-primary: #181b31;
    --brand-primary-light: #2d3142;
    --brand-primary-dark: #0f1018;
    
    /* =====================================
       Admin System Colors (from assets_admin/css/app.css)
       ===================================== */
    --blue: #007BFF;
    --indigo: #6610F2;
    --purple: #6F42C1;
    --pink: #E83E8C;
    --red: #DC3545;
    --orange: #FD7E14;
    --yellow: #FFC107;
    --green: #28A745;
    --teal: #20C997;
    --cyan: #17A2B8;
    --white: #FFFFFF;
    --gray: #6C757D;
    --gray-dark: #343A40;
    --primary: #666EE8;
    --secondary: #868E96;
    --success: #28D094;
    --info: #1E9FF2;
    --warning: #FF9149;
    --danger: #FF4961;
    --light: #F8F9FA;
    --dark: #343A40;
    --base: #9E9E9E;
    
    /* =====================================
       Additional UI Colors
       ===================================== */
    --color-muted: #6c757d;
    --color-border: #dee2e6;
    --color-hover: #f8f9fa;
    --color-focus: rgba(24, 27, 49, 0.25);
    
    /* =====================================
       Semantic Colors
       ===================================== */
    --color-error: var(--danger);
    --color-success-bg: var(--success);
    --color-warning-bg: var(--warning);
    --color-info-bg: var(--info);
    
    /* =====================================
       Typography Colors
       ===================================== */
    --text-primary: var(--brand-primary);
    --text-secondary: var(--gray);
    --text-muted: var(--color-muted);
    --text-white: var(--white);
    --text-dark: var(--dark);
    
    /* =====================================
       Background Colors
       ===================================== */
    --bg-primary: var(--brand-primary);
    --bg-secondary: var(--secondary);
    --bg-light: var(--light);
    --bg-dark: var(--dark);
    --bg-white: var(--white);
    
    /* =====================================
       Border Colors
       ===================================== */
    --border-primary: var(--brand-primary);
    --border-secondary: var(--color-border);
    --border-light: var(--light);
    --border-danger: var(--danger);
    
    /* =====================================
       Design System Variables
       ===================================== */
    --transition-smooth: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-round: 50px;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* =====================================
       Breakpoints (for reference in CSS)
       ===================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* =====================================
       Typography System
       ===================================== */
    --font-family-primary: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-secondary: 'Georgia', 'Times New Roman', serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

/* ====================================================
   Utility Classes for Quick Access
   ================================================== */

.text-brand-primary { color: var(--brand-primary) !important; }
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.border-brand-primary { border-color: var(--brand-primary) !important; }

.transition-smooth { transition: var(--transition-smooth) !important; }
.transition-fast { transition: var(--transition-fast) !important; }
.transition-slow { transition: var(--transition-slow) !important; }

/* ====================================================
   Global Form Styling
   ================================================== */

/* Consistent form controls styling */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    transition: var(--transition-smooth) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 110, 232, 0.25) !important;
    outline: none !important;
}

/* Consistent heights */
.form-control,
.form-select {
    height: 38px !important;
    padding: 0.375rem 0.75rem !important;
}

/* Textarea specific styling */
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    resize: vertical !important;
}

/* Select dropdown styling */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* Disabled states */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--light) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* Invalid states */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid states */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}