/* ================================================================
   UNIFIED THEME VARIABLES - LottoMuse
   Consolidates all CSS variables for consistent theming across pages
   Based on Bootswatch Cosmo Theme with lottery-inspired enhancements
   ================================================================ */

:root {
    /* ===== PRIMARY COLORS - Lottery Theme ===== */
    --primary-purple: #5B3E90;
    --primary-blue: #1A2B63;
    --accent-teal: #36D1DC;
    --accent-blue: #5B86E5;
    
    /* Cosmo Theme Colors - Matching Bootstrap */
    --cosmo-primary: #2780E3;
    --cosmo-success: #3FB618;
    --cosmo-info: #9954BB;
    --cosmo-warning: #FF7518;
    --cosmo-danger: #FF0039;
    
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(90deg, var(--primary-purple) 0%, var(--primary-blue) 100%);
    --gradient-accent: linear-gradient(145deg, var(--accent-teal), var(--accent-blue));
    --gradient-success: linear-gradient(135deg, #3FB618 0%, #2d8a11 100%);
    --gradient-warning: linear-gradient(135deg, #FF7518 0%, #e66100 100%);
    --gradient-danger: linear-gradient(135deg, #FF0039 0%, #cc002e 100%);
    
    /* ===== SPACING SYSTEM ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-xxl: 3rem;     /* 48px */
    
    /* Mobile spacing */
    --mobile-spacing-xs: 0.5rem;   /* 8px */
    --mobile-spacing-sm: 0.75rem;  /* 12px */
    --mobile-spacing-md: 1rem;     /* 16px */
    --mobile-spacing-lg: 1.25rem;  /* 20px */
    --mobile-spacing-xl: 1.5rem;   /* 24px */
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.5rem;     /* 8px */
    --radius: 0.75rem;       /* 12px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-round: 50%;
    
    /* ===== SHADOWS ===== */
    --shadow-light: 0 2px 8px rgba(91, 62, 144, 0.1);
    --shadow-medium: 0 4px 12px rgba(91, 62, 144, 0.15);
    --shadow-heavy: 0 8px 24px rgba(91, 62, 144, 0.2);
    --shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    
    /* ===== BORDERS ===== */
    --border-subtle: #dee2e6;
    --border-enhanced: rgba(91, 62, 144, 0.3);
    --border-width: 1px;
    --border-width-thick: 4px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s ease-in-out;
    
    /* ===== FOCUS STATES ===== */
    --focus-ring: 0 0 0 3px rgba(91, 62, 144, 0.25);
    --focus-ring-primary: 0 0 0 0.25rem rgba(39, 128, 227, 0.25);
    
    /* ===== BACKGROUNDS ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-light: #fafbfc;
    --bg-dark: #212529;
    --bg-overlay: rgba(33, 37, 41, 0.5);
    
    /* ===== TEXT COLORS ===== */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-white: #ffffff;
    
    /* ===== TYPOGRAPHY ===== */
    --font-family-base: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --line-height-base: 1.5;
    --line-height-sm: 1.45;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== SIDEBAR & NAVIGATION ===== */
    --sidebar-width: 260px;
    --sidebar-padding: 16px;
    --sidebar-bg: #ffffff;
    --sidebar-text: #212529;
    --sidebar-secondary: #6c757d;
    --sidebar-active: #e7f3ff;
    --sidebar-hover: #f8f9fa;
    --navbar-height: 56px;
    
    /* ===== CHAT SPECIFIC ===== */
    --chat-text-size: 1rem;
    --chat-text-line-height: 1.45;
    --heading-size-ratio: 1.2;
    --placeholder-color: #6c757d;
    --initial-prompt-bg: rgba(99, 102, 241, 0.05);
    
    /* ===== LOTTERY SPECIFIC ===== */
    --lucky-number-size: 40px;
    --lucky-number-font: 18px;
    --lottery-ball-size: 48px;
    
    /* ===== Z-INDEX LAYERS ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-backdrop: 1040;
    --z-sidebar: 1042;
    --z-hamburger: 1043;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ===== TOUCH TARGETS (Mobile WCAG) ===== */
    --min-touch-target: 48px;
    
    /* ===== SAFE AREA INSETS (Mobile Notches) ===== */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* ===== BUTTON SIZES ===== */
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 1rem;
    --btn-padding-lg-y: 0.75rem;
    --btn-padding-lg-x: 1.5rem;
    --btn-padding-sm-y: 0.25rem;
    --btn-padding-sm-x: 0.5rem;
    
    /* ===== FORM CONTROLS ===== */
    --input-padding-y: 0.5rem;
    --input-padding-x: 0.75rem;
    --input-border-radius: var(--radius-sm);
    --input-focus-border: var(--cosmo-primary);
    
    /* ===== CARD DEFAULTS ===== */
    --card-padding: 1.5rem;
    --card-border-radius: var(--radius);
    --card-shadow: var(--shadow-card);
    
    /* ===== ALERTS ===== */
    --alert-padding: 1rem;
    --alert-border-radius: var(--radius);
    --alert-border-width: var(--border-width-thick);
}

/* ===== DARK MODE SUPPORT (Future Enhancement) ===== */
/* Dark mode variables can be added here when needed */