/* ═══════════════════════════════
   VARIABLES
═══════════════════════════════ */
:root {
  /* Colors */
  --color-blue:    #1DA3FF;
  --color-orange:  #FF6B35;
  --color-dark:    #111111;
  --color-text:    #222222;
  --color-muted:   #666666;
  --color-border:  #e8e8e8;
  --color-bg:      #ffffff;
  --color-bg-alt:  #f5f9fc;
  --color-white:   #ffffff;

  /* Accent backgrounds */
  --bg-blue:   #e8f4ff;
  --bg-peach:  #fff0ea;
  --bg-green:  #e8fff2;
  --bg-orange: #fff3ea;
  --bg-purple: #f0eaff;
  --bg-pink:   #ffe8f5;
  --bg-teal:   #e0f7f5;

  /* Typography */
  --font-main:    'Manrope', sans-serif;
  --font-display: 'Playfair Display', serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  2rem;      /* 32px */
  --fs-3xl:  2.5rem;    /* 40px */
  --fs-4xl:  3rem;      /* 48px */
  --fs-5xl:  3.5rem;    /* 56px */
  --fs-hero: clamp(2.2rem, 7vw, 5rem);
  --fs-hero-sub: clamp(1.6rem, 4.5vw, 3rem);

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-2xl: 96px;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.14);
  --shadow-hero: 0 16px 48px rgba(0,0,0,0.28);

  /* Transitions */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  180ms;
  --dur-med:   300ms;
  --dur-slow:  600ms;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 60px);
  --nav-height: 68px;
}