:root {
  /* Brand core */
  --color-primary: #E32127;       /* logo red — CTAs, accents, alerts */
  --color-primary-dark: #B0181D;
  --color-primary-light: #FF4D52;
  --color-flame-start: #FFB347;   /* gradient for flame accents/icons only */
  --color-flame-end: #E85D04;
  --color-secondary: #1428A0;     /* logo blue — headings, nav, trust elements */
  --color-secondary-dark: #0D1B6E;
  --color-secondary-light: #3B54D6;

  /* Neutrals — do NOT use pure #000/#fff */
  --color-ink: #0F172A;
  --color-body: #3F4759;
  --color-muted: #6B7280;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F7FB;
  --color-border: #E6E8F0;
  --color-border-dark: #CBD5E1;

  /* Dark Theme Accents / Hero Inset */
  --color-dark-bg: #0B1120;
  --color-dark-surface: #1E293B;
  --color-dark-border: #334155;

  /* Semantic */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-info: #0284C7;

  /* Spacing scale (4px base) */
  --space-1: 4px;  
  --space-2: 8px;  
  --space-3: 12px; 
  --space-4: 16px;
  --space-6: 24px; 
  --space-8: 32px; 
  --space-12: 48px; 
  --space-16: 64px;
  --space-24: 96px; 
  --space-32: 128px;

  /* Radius / shadow / motion */
  --radius-sm: 8px; 
  --radius-md: 14px; 
  --radius-lg: 24px; 
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 48px rgba(15,23,42,.12);
  --shadow-glow: 0 0 25px rgba(227,33,39, 0.25);
  
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; 
  --dur-base: 250ms; 
  --dur-slow: 450ms;

  /* Type scale — fluid with clamp() */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --fs-h1: clamp(2.5rem, 4vw + 1rem, 4.25rem);
  --fs-h2: clamp(1.85rem, 2.5vw + 1rem, 2.85rem);
  --fs-h3: clamp(1.35rem, 1.5vw + 0.8rem, 1.85rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --container-max: 1240px;
}