/* ============================================================
   DENTAL ACACIAS — Design Tokens
   Paleta extraída del protocolo PDF + posts IG del cliente
   ============================================================ */

:root {
  /* ---------- FONDOS (negro profundo, mismo del PDF) ---------- */
  --bg-primary:      #0A0A0A;
  --bg-secondary:    #111111;
  --bg-elevated:     #161616;
  --bg-surface:      #1C1C1C;
  --bg-overlay:      rgba(10, 10, 10, 0.92);

  /* ---------- DORADO CHAMPAGNE (acento del PDF) ---------- */
  --gold:            #D4A574;
  --gold-light:      #E8C896;
  --gold-dark:       #A67C4C;
  --gold-glow:       rgba(212, 165, 116, 0.25);

  /* ---------- BLANCOS Y GRISES ---------- */
  --white:           #FAFAFA;
  --white-muted:     #E8E8E8;
  --text-secondary:  #B8B8B8;
  --text-tertiary:   #6E6E6E;
  --divider:         rgba(255, 255, 255, 0.08);

  /* ---------- ACENTOS (coral de posts estética) ---------- */
  --coral:           #D4846B;
  --coral-soft:      rgba(212, 132, 107, 0.15);

  /* ---------- WHATSAPP (CTA principal) ---------- */
  --wa-green:        #25D366;
  --wa-green-dark:   #128C7E;
  --wa-bg:           #0B141A;
  --wa-bubble-out:   #005C4B;
  --wa-bubble-in:    #202C33;
  --wa-header:       #202C33;
  --wa-text:         #E9EDEF;
  --wa-text-secondary: #8696A0;

  /* ---------- TIPOGRAFÍA ---------- */
  /* Display: serif elegante (logo DA + títulos del PDF) */
  --font-display:    'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  /* Headings secundarios: sans bold uppercase */
  --font-heading:    'Inter', -apple-system, system-ui, sans-serif;
  /* Handwritten: subtítulos emocionales (del PDF) */
  --font-script:     'Caveat', 'Kalam', cursive;
  /* Body: sans moderno */
  --font-body:       'Inter', -apple-system, system-ui, sans-serif;
  /* Logo clone style */
  --font-logo:       'Cinzel', 'Cormorant Garamond', serif;

  /* Escala modular 1.25 (major third) */
  --fs-xs:     0.75rem;   /* 12px */
  --fs-sm:     0.875rem;  /* 14px */
  --fs-base:   1rem;      /* 16px */
  --fs-md:     1.125rem;  /* 18px */
  --fs-lg:     1.5rem;    /* 24px */
  --fs-xl:     2rem;      /* 32px */
  --fs-2xl:    2.75rem;   /* 44px */
  --fs-3xl:    3.75rem;   /* 60px */
  --fs-4xl:    5rem;      /* 80px */
  --fs-5xl:    7rem;      /* 112px — hero display */

  /* Line heights */
  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-relaxed:   1.75;

  /* Tracking */
  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.05em;
  --ls-wider:     0.12em;
  --ls-widest:    0.25em;

  /* ---------- ESPACIADO (base 8px) ---------- */
  --space-1:    0.25rem;  /* 4 */
  --space-2:    0.5rem;   /* 8 */
  --space-3:    0.75rem;  /* 12 */
  --space-4:    1rem;     /* 16 */
  --space-5:    1.5rem;   /* 24 */
  --space-6:    2rem;     /* 32 */
  --space-8:    3rem;     /* 48 */
  --space-10:   4rem;     /* 64 */
  --space-12:   6rem;     /* 96 */
  --space-16:   8rem;     /* 128 */
  --space-20:   10rem;    /* 160 */

  /* ---------- RADIOS ---------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  9999px;

  /* ---------- SOMBRAS (con toque dorado) ---------- */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-gold:  0 8px 32px rgba(212, 165, 116, 0.18);
  --shadow-cta:   0 12px 30px rgba(37, 211, 102, 0.25);

  /* ---------- TRANSICIONES ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --dur-fast:     0.18s;
  --dur-normal:   0.3s;
  --dur-slow:     0.6s;
  --dur-slower:   0.9s;

  /* ---------- CONTENEDORES ---------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  /* ---------- Z-INDEX ---------- */
  --z-base:        1;
  --z-dropdown:    10;
  --z-sticky:      100;
  --z-overlay:     900;
  --z-modal:       1000;
  --z-toast:       1100;
}

/* Preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}