:root {
  /* Brand Colors - Matching Example Site */
  --color-primary-blue: #0057FF;
  --color-primary-blue-hover: #0047cc;
  --color-orange-accent: #FF9E1B;
  --color-background-light: #F8FAFC;
  --color-hero-background: #E6F4FB;
  --color-dark-navy: #1e3a5f;
  --color-success-green: #10b981;
  --color-text-primary: #0B1F33;
  --color-text-secondary: #4A5D73;
  --color-card-border: #E5EAF0;
  --color-card-logo-bg: #f8fafc;
  --color-white: #ffffff;
  --color-error-red: #ef4444;
  --color-gray-hover: #f1f5f9;
  --color-gray-light: #f8fafc;
  --color-gray-border: #d1d5db;

  /* Typography */
  --font-family: Inter, system-ui, -apple-system, sans-serif;
  --font-size-eyebrow: 12px;
  --font-size-h1: 48px;
  --font-size-subtitle: 18px;
  --font-size-card-title: 18px;
  --font-size-card-description: 14px;
  --font-size-button: 14px;
  --font-size-category: 14px;
  --font-size-tab: 15px;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --letter-spacing-eyebrow: 3px;
  --line-height-description: 1.5;

  /* Spacing Scale */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* Layout */
  --header-height: 72px;
  --container-max-width: 1400px;
  --grid-max-width: 1200px;
  --card-logo-height: 140px;
  --carousel-height: 320px;
  --border-radius-card: 8px;
  --border-radius-pill: 9999px;
  --border-radius-button: 8px;

  /* Shadows */
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.5s ease;
}