/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — v6 PREMIUM (12-step enhanced)
   ═══════════════════════════════════════════════════ */
:root {
  /* ── STEP 1: Premium Font Stack ── */
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Backgrounds ── */
  --bg: #FAFAF9;
  --bg-warm: #FFF8F5;
  --bg-section: #F5F5F4;
  --bg-peach: rgba(251, 94, 71, 0.22);
  --bg-peach-soft: rgba(251, 94, 71, 0.06);
  --bg-peach-card: linear-gradient(1.9deg, #fff 0%, #F9FBFF 21%, #FFD4CF 100%);
  --bg-dark: #261310;

  /* ── Gradients ── */
  --hero-gradient: linear-gradient(180deg, var(--bg-warm) 0%, rgba(251,94,71,0.22) 20%, var(--bg) 65%);
  --features-gradient: linear-gradient(180deg, var(--bg) 8%, rgba(251,94,71,0.18) 50%, var(--bg) 100%);

  /* ── Text ── */
  --text-heading: #111928;
  --text-body: #333B52;
  --text-muted: rgba(51, 59, 82, 0.55);
  --text-light: rgba(51, 59, 82, 0.35);
  --text-white: #FFFFFF;
  --text-white-muted: rgba(255, 255, 255, 0.7);

  /* ── Brand Coral ── */
  --coral: #FB5E47;
  --coral-hover: #E8503A;
  --coral-light: rgba(251, 94, 71, 0.08);
  --coral-medium: rgba(251, 94, 71, 0.15);
  --coral-glow: 0 8px 32px rgba(251, 94, 71, 0.28);
  --coral-glow-strong: 0 12px 44px rgba(251, 94, 71, 0.4);

  /* ── Accent Indigo (for icons, glows, gradient text) ── */
  --indigo: #6366F1;
  --indigo-light: rgba(99, 102, 241, 0.12);
  --purple: #A78BFA;

  /* ── Secondary ── */
  --navy: #111928;
  --blue-tint: #E3EBFF;
  --green: #10B981;
  --whatsapp: #25D366;

  /* ── Borders ── */
  --border: #E9EBF0;
  --border-light: rgba(233, 235, 240, 0.6);
  --border-hover: rgba(251, 94, 71, 0.25);

  /* ── Size Scale ── */
  --text-hero: clamp(2.8rem, 6vw, 5.5rem);
  --text-h2: clamp(1.875rem, 4vw, 3rem);
  --text-h3: clamp(1.125rem, 2vw, 1.375rem);
  --text-body-size: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* ── Spacing ── */
  --container: 1200px;
  --section-pad: 120px;
  --section-pad-mobile: 80px;
  --gap: 24px;

  /* ── Radius ── */
  --radius-card: 24px;
  --radius-card-lg: 30px;
  --radius-inner: 16px;
  --radius-pill: 999px;
  --radius-btn: 14px;

  /* ── STEP 9: Multi-layered Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 24px 56px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 20px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05), 0 0 40px rgba(251,94,71,0.06);
  --shadow-btn-glow: 0 4px 15px rgba(251,94,71,0.35), 0 0 50px rgba(251,94,71,0.1);

  /* ── Easing ── */
  --ease-smooth: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* STEP 12: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}