/* assets/css/variables.css - Design System Variables */

:root {
    /* Fonts */
    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: 'Inter', -apple-system, sans-serif;
    
    /* System Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-bg: #ffffff;
    --color-bg-secondary: #f6f6f8;
    --color-text: #1a1a1a;
    --color-text-muted: #606067;
    --color-border: #e2e2e7;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    
    /* Configurable Theme Colors (Loaded from DB, overridden in PHP header) */
    --color-primary: #0c0c0e;         /* Deep near black for main headers/sections */
    --color-accent: #f25a38;          /* Bright primary accent (orange/red) */
    --color-accent-hover: #d04626;    
    --color-accent-light: rgba(242, 90, 56, 0.08);
    
    /* Border Radii */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.15s ease;
    
    /* Spacing & Widths */
    --container-max-width: 1400px;
    --header-height: 80px;
}