/* ===== DESIGN TOKENS ===== */
:root {
  /* ─── Color Palette ─── */
  --clr-primary-900:  #0a1628;
  --clr-primary-800:  #0d2045;
  --clr-primary-700:  #103366;
  --clr-primary-600:  #1448a3;
  --clr-primary-500:  #1a5cc8;   /* Brand primary */
  --clr-primary-400:  #4a7fd4;
  --clr-primary-300:  #7aaae2;
  --clr-primary-200:  #b8d4f2;
  --clr-primary-100:  #deeaf9;
  --clr-primary-50:   #f0f6fd;

  --clr-accent-500:   #2bbdcc;   /* Teal accent */
  --clr-accent-400:   #4ecada;
  --clr-accent-100:   #d0f4f7;

  --clr-gold:         #c9a84c;

  --clr-neutral-900:  #111827;
  --clr-neutral-800:  #1f2937;
  --clr-neutral-700:  #374151;
  --clr-neutral-600:  #4b5563;
  --clr-neutral-500:  #6b7280;
  --clr-neutral-400:  #9ca3af;
  --clr-neutral-300:  #d1d5db;
  --clr-neutral-200:  #e5e7eb;
  --clr-neutral-100:  #f3f4f6;
  --clr-neutral-50:   #f9fafb;
  --clr-white:        #ffffff;

  --clr-success:      #16a34a;
  --clr-whatsapp:     #25d366;

  /* ─── Typography ─── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-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:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */
  --fs-6xl:   4.5rem;     /* 72px */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ─── Spacing ─── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ─── Layout ─── */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 2rem);

  /* ─── Borders & Radii ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-md:  0 4px 16px rgba(10, 22, 40, 0.10), 0 2px 8px rgba(10, 22, 40, 0.07);
  --shadow-lg:  0 8px 32px rgba(10, 22, 40, 0.14), 0 4px 12px rgba(10, 22, 40, 0.08);
  --shadow-xl:  0 20px 60px rgba(10, 22, 40, 0.18);
  --shadow-primary: 0 8px 24px rgba(26, 92, 200, 0.30);

  /* ─── Transitions ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-xl:     700ms;

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-fixed:   300;
  --z-fab:     400;
  --z-overlay: 500;
}