/* 
   Order Capture System (AR Pedidos)
   Design System & Variable Definitions (CSS Custom Properties)
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colors - Harmonious HSL System */
    --hue-primary: 220; /* Electric Blue */
    --hue-secondary: 265; /* Violet/Purple */
    --hue-success: 142; /* Emerald Green */
    --hue-warning: 38; /* Warm Amber */
    --hue-danger: 350; /* Crimson Red */
    
    /* Brand Colors */
    --color-primary: HSL(var(--hue-primary), 90%, 56%);
    --color-primary-hover: HSL(var(--hue-primary), 95%, 48%);
    --color-primary-rgb: 37, 99, 235;
    
    --color-secondary: HSL(var(--hue-secondary), 85%, 60%);
    --color-secondary-hover: HSL(var(--hue-secondary), 90%, 52%);
    
    --color-success: HSL(var(--hue-success), 72%, 45%);
    --color-success-hover: HSL(var(--hue-success), 80%, 38%);
    
    --color-warning: HSL(var(--hue-warning), 93%, 52%);
    --color-warning-hover: HSL(var(--hue-warning), 98%, 46%);
    
    --color-danger: HSL(var(--hue-danger), 84%, 56%);
    --color-danger-hover: HSL(var(--hue-danger), 90%, 48%);
    
    /* Neutral Colors - Modern Deep Slate */
    --color-bg: HSL(222, 25%, 8%);
    --color-surface: HSL(222, 22%, 12%);
    --color-surface-hover: HSL(222, 20%, 16%);
    --color-card: HSL(222, 22%, 14%);
    
    --color-text-primary: HSL(220, 20%, 96%);
    --color-text-secondary: HSL(220, 14%, 68%);
    --color-text-muted: HSL(220, 10%, 48%);
    
    --color-border: HSL(222, 16%, 22%);
    --color-border-hover: HSL(222, 14%, 30%);
    --color-border-focus: HSL(var(--hue-primary), 70%, 50%);
    
    /* Glassmorphism Accents */
    --glass-bg: rgba(18, 24, 38, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.4);
    --glass-blur: blur(14px);
    
    /* Layout Sizes */
    --sidebar-width: 260px;
    --header-height: 70px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-full: 9999px;
    
    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 0 16px rgba(37, 99, 235, 0.3);
    
    /* Animation Speeds */
    --transition-fast: 0.15s ease;
    --transition-md: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s ease;
}

/* Light Theme overrides for future toggling (if requested, otherwise defaults to premium dark) */
[data-theme="light"] {
    --color-bg: HSL(220, 20%, 97%);
    --color-surface: HSL(0, 0%, 100%);
    --color-surface-hover: HSL(220, 15%, 94%);
    --color-card: HSL(0, 0%, 100%);
    
    --color-text-primary: HSL(222, 25%, 12%);
    --color-text-secondary: HSL(222, 12%, 40%);
    --color-text-muted: HSL(222, 8%, 60%);
    
    --color-border: HSL(220, 15%, 90%);
    --color-border-hover: HSL(220, 12%, 80%);
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.05);
}