/* Design Tokens — Rapid Epoxy (Clean Architectural Minimal) */
:root {
  /* ─── Color Palette ─── */
  --color-base:       #F8F8F6;   /* warm light off-white background */
  --color-surface:    #FFFFFF;   /* pure white card background */
  --color-surface-sub:#F3F3F0;   /* subtle elevated surface */
  
  --color-teal:       #044E54;   /* dark teal primary brand */
  --color-teal-dark:  #023539;   /* deeper teal */
  --color-teal-light: #E6F2F3;   /* light teal accent background */
  
  --color-gold:       #D4A325;   /* mustard gold accent button */
  --color-gold-hover: #BF901C;   /* darker gold on hover */
  --color-gold-light: #FDF8EC;   /* pale gold background badge */
  
  --color-whatsapp:   #25D366;   /* vibrant whatsapp green */
  --color-whatsapp-dark:#1DA851;
  
  --color-ink:        #1A1A1A;   /* dark charcoal title text */
  --color-muted:      #555555;   /* muted body copy */
  --color-secondary:  #777777;   /* secondary text */
  --color-border:     rgba(0, 0, 0, 0.08); /* light subtle border */
  --color-border-dark:rgba(255, 255, 255, 0.12);

  /* ─── Typography ─── */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-xs:    clamp(0.7rem, 0.65vw + 0.5rem, 0.781rem);
  --text-sm:    clamp(0.813rem, 0.75vw + 0.6rem, 0.875rem);
  --text-base:  clamp(0.938rem, 0.9vw + 0.7rem, 1rem);
  --text-md:    clamp(1.05rem, 1vw + 0.75rem, 1.15rem);
  --text-lg:    clamp(1.2rem, 1.5vw + 0.8rem, 1.35rem);
  --text-xl:    clamp(1.4rem, 2vw + 1rem, 1.75rem);
  --text-2xl:   clamp(1.8rem, 3vw + 1rem, 2.3rem);
  --text-3xl:   clamp(2.2rem, 4vw + 1rem, 3.2rem);
  --text-hero:  clamp(2.5rem, 6vw + 1rem, 4.2rem);

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

  /* ─── Borders & Radii ─── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ─── Motion ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;

  /* ─── Shadows ─── */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-teal: 0 8px 24px rgba(4, 78, 84, 0.25);
  --shadow-gold: 0 8px 24px rgba(212, 163, 37, 0.3);

  /* ─── Z-Index ─── */
  --z-header:  100;
  --z-modal:   200;
  --z-float:   999;
}