/* ============================================================
   MYM ODONTOLOGÍA — Design Tokens
   Fuente: Sección 4 - Sistema de Diseño + handoff Claude Design
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES — Fondos
     ---------------------------------------------------------- */
  --color-bg-dark:    #0D1828;  /* Azul Noche: hero, nav, footer */
  --color-bg-neutral: #F0EBE0;  /* Beige: secciones de apoyo     */
  --color-bg-light:   #FFFFFF;  /* Blanco: contenido principal   */

  /* ----------------------------------------------------------
     COLORES — Acento dorado
     ---------------------------------------------------------- */
  --color-accent:       #C9A96E; /* CTA, íconos, detalles */
  --color-accent-hover: #B8935A; /* Estados hover         */
  --color-accent-light: #E8D5B0; /* Fondos sutiles        */

  /* ----------------------------------------------------------
     COLORES — Texto
     ---------------------------------------------------------- */
  --color-text-dark:           #0D1828; /* Sobre fondos claros          */
  --color-text-light:          #FFFFFF; /* Sobre fondos oscuros         */
  --color-text-muted:          #6B7280; /* Secundario sobre claros      */
  --color-text-muted-dark:     #A0AABB; /* Secundario sobre oscuros     */
  --color-text-nav:            #B6C0CE; /* Ítems de navegación          */
  --color-text-secondary-dark: #A0AABB; /* Secundario alternativo       */
  --color-text-body-light:     #5B6470; /* Cuerpo sobre fondos claros   */
  --color-text-meta-light:     #616976; /* Meta / subtexto sobre claros — WCAG AA (beige 4.66:1, blanco 5.54:1) */
  --color-text-meta-dark:      #7A8290; /* Meta / subtexto sobre oscuros (footer/drawer) — 4.60:1 sobre navy */
  --color-gold-text:           #B8935A; /* Texto dorado destacado (sobre fondos oscuros) */
  --color-gold-text-on-light:  #7C5E36; /* Dorado accesible sobre fondos claros: beige #F0EBE0 (5.03:1) y blanco (5.98:1). WCAG AA */

  /* ----------------------------------------------------------
     COLORES — Bordes
     ---------------------------------------------------------- */
  --color-border-dark:  rgba(201, 169, 110, 0.20); /* Sobre fondos oscuros */
  --color-border-light: rgba(13,  24,  40,  0.12); /* Sobre fondos claros  */

  /* ----------------------------------------------------------
     COLORES — Estado
     ---------------------------------------------------------- */
  --color-success: #2ECC71;
  --color-error:   #E74C3C;
  --color-warning: #F39C12;

  /* ----------------------------------------------------------
     COLOR — WhatsApp (única excepción documentada a la paleta,
     sección 5.5 — solo para el botón flotante de WhatsApp)
     ---------------------------------------------------------- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1FBE5A;

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Familias
     ---------------------------------------------------------- */
  --font-display:   'Cinzel',     serif;    /* Títulos y hero      */
  --font-body:      'Montserrat', sans-serif; /* Texto y navegación */
  --font-signature: 'Great Vibes', cursive;  /* Eslogan y firmas   */

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Escala de tamaños
     ---------------------------------------------------------- */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Letter-spacing
     ---------------------------------------------------------- */
  --tracking-display: 0.08em;
  --tracking-caps:    0.15em;

  /* ----------------------------------------------------------
     ESPACIADO
     ---------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* ----------------------------------------------------------
     UTILITARIOS ESPECIALES
     ---------------------------------------------------------- */
  --hero-padding-top: 30px;
  --hero-padding-inline: 56px;
  --hero-border-soft: rgba(201, 169, 110, 0.16);
  --color-text-hero-subtitle: #C3CBD6;
  --shadow-hero-cta: 0 0 28px rgba(201, 169, 110, 0.4);

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-card: 14px;
  --radius-lg:   16px;
  --radius-arch: 3rem 3rem var(--radius-card) var(--radius-card); /* Arco sutil (guiño al hero) para el top de tarjetas */
  --radius-pill: 40px;
  --radius-full: 9999px;
  --radius-icon: 50%;

  /* ----------------------------------------------------------
     SOMBRAS — Escala base
     ---------------------------------------------------------- */
  --shadow-sm:   0 1px  3px  rgba(13, 24, 40, 0.15);
  --shadow-md:   0 4px  16px rgba(13, 24, 40, 0.20);
  --shadow-lg:   0 8px  32px rgba(13, 24, 40, 0.30);
  --shadow-gold: 0 0   24px  rgba(201, 169, 110, 0.35);

  /* ----------------------------------------------------------
     SOMBRAS — Componentes
     ---------------------------------------------------------- */
  --shadow-card:           0 2px  10px rgba(13,  24, 40, 0.06);
  --shadow-card-hover:     0 20px 44px rgba(13,  24, 40, 0.15);
  --shadow-cta:            0 0    26px rgba(201, 169, 110, 0.38);
  --shadow-navbar-scrolled: 0 8px 30px rgba(0,   0,  0,  0.28);
  --shadow-drawer:         -20px 0 50px rgba(0,   0,  0,  0.50);

  /* ----------------------------------------------------------
     EASING — Curvas custom (las nativas de CSS son débiles).
     ease-out fuerte = respuesta inmediata; drawer = curva iOS.
     `ease` genérico se reserva para cambios de color/hover.
     ---------------------------------------------------------- */
  --ease-out-strong:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:        cubic-bezier(0.32, 0.72, 0, 1);

  /* ----------------------------------------------------------
     TRANSICIONES — Base
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   600ms ease;

  /* ----------------------------------------------------------
     TRANSICIONES — Componentes
     ---------------------------------------------------------- */
  --transition-card:    transform 250ms var(--ease-out-strong), box-shadow 250ms ease, border-color 250ms ease;
  --transition-navbar:  background .25s ease, border-color .25s ease, box-shadow .25s ease;
  --transition-drawer:  transform 380ms var(--ease-drawer);

  /* ----------------------------------------------------------
     GRADIENTES
     ---------------------------------------------------------- */
  --gradient-hero:              radial-gradient(circle at 72% 42%, #1a2c44 0%, #0D1828 58%);
  --gradient-testimonial-card:  linear-gradient(160deg, #F7F2E8 0%, #F0EBE0 100%);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --nav-height:        72px;

}