@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@400;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root {
  /* Brand Colors */
  --color-primary: #3DBDE4;   /* Sky Blue */
  --color-secondary: #1A56C4; /* Royal Blue */
  --color-cta: #F5820A;       /* Warm Orange */
  --color-cta-hover: #D92B2B; /* Red */
  --color-success: #2E9B3F;   /* Green */
  --color-dark: #0F1E5C;      /* Deep Navy */
  
  /* Backgrounds & Surfaces */
  --color-bg: #F8FCFF;        /* Near-white with blue tint */
  --color-card-bg: #FFFFFF;   /* Pure white */
  
  /* Typography Colors */
  --color-text: #1A1A2E;      /* Near-black */
  --color-text-muted: #5A6A8A;/* Muted blue-gray */
  
  /* Borders */
  --color-border: rgba(61, 189, 228, 0.25); /* Soft blue border */
  --color-gold-tint: rgba(245, 130, 10, 0.3); /* For card borders/dividers */

  /* Typography Fonts */
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Playfair Display', serif;

  /* Spacing */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-xxl: clamp(4rem, 8vw, 6rem);
  
  /* Layout */
  --container-width: 1280px;
  --container-padding: var(--space-md);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Navigation */
  --nav-height: 80px;
}