/* Design Tokens and Typography Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Brand Colors */
    --primary-red: #e63946;
    --primary-red-dark: #c91f32;
    --navy: #102a43;
    --navy-light: #243b53;
    --orange: #ff7a45;
    --blue: #4ea8de;
    --teal: #2bbbad;
    --green: #43aa8b;
    --purple: #8b7cf6;
    
    /* Layout Interface Colors */
    --background: #f7faff;
    --surface: #ffffff;
    --text: #17324d;
    --muted-text: #66788a;
    --border: #e5ebf3;
    --border-light: rgba(229, 235, 243, 0.5);
    
    /* Gradients */
    --gradient-red: linear-gradient(135deg, #e63946 0%, #c91f32 100%);
    --gradient-orange: linear-gradient(135deg, #ff7a45 0%, #ff5216 100%);
    --gradient-navy: linear-gradient(135deg, #102a43 0%, #243b53 100%);
    --gradient-teal: linear-gradient(135deg, #2bbbad 0%, #009688 100%);
    --gradient-purple: linear-gradient(135deg, #8b7cf6 0%, #6352e8 100%);
    --gradient-glow: linear-gradient(135deg, rgba(230, 57, 70, 0.15) 0%, rgba(16, 42, 67, 0.05) 100%);
    --gradient-hero: linear-gradient(135deg, #ffffff 0%, #eef5fc 100%);
    --gradient-cta: linear-gradient(135deg, #e63946 0%, #ff7a45 50%, #ff5216 100%);
    
    /* Shadow tokens */
    --shadow: 0 12px 35px rgba(16, 42, 67, 0.08);
    --shadow-hover: 0 20px 45px rgba(16, 42, 67, 0.15);
    --shadow-soft: 0 4px 15px rgba(16, 42, 67, 0.03);
    --shadow-header: 0 10px 30px rgba(16, 42, 67, 0.05);
    
    /* Layout structure tokens */
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 24px;
    
    /* Typography Font Families */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Timings */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s ease;
}