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

:root {
    /* Color Palette - R Danillo (Steel Blue & Coral Red) */
    --bg-primary: #0f1c2d;      /* Deep steel blue background */
    --bg-secondary: #15273b;    /* Medium steel blue background */
    --bg-tertiary: #1c3149;
    --bg-card: rgba(21, 39, 59, 0.7);
    --bg-glass: rgba(15, 28, 45, 0.8);
    
    --border-color: rgba(255, 255, 255, 0.05);
    --border-color-hover: rgba(255, 255, 255, 0.1);
    
    /* Brand Accent Colors */
    --primary: #e04b3e;         /* R Danillo Coral Red */
    --primary-hover: #c43c30;   /* Darker Coral Red */
    --primary-light: rgba(224, 75, 62, 0.12);
    --primary-glow: rgba(224, 75, 62, 0.4);
    
    --secondary: #f07d72;       /* Light Coral Peach (for gradients) */
    --secondary-hover: #e04b3e; 
    --secondary-light: rgba(240, 125, 114, 0.1);
    
    --accent: #10b981;          /* WhatsApp Green */
    --accent-hover: #059669;    
    --accent-light: rgba(16, 185, 129, 0.1);
    
    /* Text Colors */
    --text-primary: #ffffff;    /* Clear white */
    --text-secondary: #cbd6e2;  /* Light slate blue-gray */
    --text-muted: #70849c;      /* Muted slate blue-gray */
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Spacings */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    
    /* Borders & Shadows */
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.4);
    --glow-primary: 0 0 20px rgba(224, 75, 62, 0.2);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout Constants */
    --max-width: 1200px;
    --header-height: 80px;
}