/*
  Dr. Quijano — design tokens
  Único archivo con valores literales (color, tipografía, espaciado, motion, elevación).
  Ningún otro archivo CSS/JS debe declarar un hex, un font-family o un valor de easing suelto.
*/

:root {
  /* ---------------------------------------------------------------------
     Color — marfil + piedra + arena + oro antiguo. Muestreado de los
     assets reales de marca (busto, isotipo). Ver CLAUDE.md §3.
     --------------------------------------------------------------------- */

  /* Marca */
  --sy-gold: #b89142; /* oro envejecido: logo, CTA primario, énfasis, itálicas de titular */
  --sy-gold-deep: #9a7757; /* hover / estado presionado del oro */
  --sy-gold-soft: #d9c8a5; /* trazo de oro sobre fondos oscuros, filetes muy finos */
  --sy-gold-text: #8c692d; /* oro oscurecido para usarse como COLOR DE TEXTO sobre crema/superficie (~4.7:1, AA); --sy-gold y --sy-gold-deep no pasan AA como texto y quedan para fondos, bordes e iconografía */
  --sy-greige: #a79d93; /* taupe / gris cálido: banda del hero, bloques de contraste puntual */

  /* Superficies — marfil / blanco cálido / arena */
  --sy-cream: #faf7f2; /* fondo base */
  --sy-cream-alt: #f5f1ee; /* alternancia entre secciones */
  --sy-surface: #ffffff; /* tarjetas */
  --sy-stone: #ece5db; /* arena: paneles placeholder, superficies de contraste bajo */

  /* Tinta — negro suave, nunca 100% negro */
  --sy-ink: #14110e; /* titulares */
  --sy-ink-soft: #4a443e; /* cuerpo de texto */
  --sy-ink-mute: #766d64; /* metadatos, captions — oscurecido sobre el valor muestreado para pasar AA (4.5:1) en texto pequeño sobre --sy-cream */
  --sy-line: #e4dcd2; /* filetes y divisores */

  /* Overlays */
  --sy-scrim: rgba(20, 17, 14, 0.45); /* control de contraste sobre imagen */
  --sy-veil: rgba(250, 247, 242, 0.92); /* barrido/cortina crema de transición de página */

  /* ---------------------------------------------------------------------
     Tipografía
     --------------------------------------------------------------------- */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", sans-serif;
  --font-script: "Mrs Saint Delafield", "Bodoni Moda", cursive; /* solo la firma del médico */

  --fs-display-xl: clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
  --fs-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --fs-display-md: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --fs-display-sm: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-label: 0.75rem;

  --lh-display: 1.08;
  --lh-body: 1.6;

  --ls-label: 0.18em;

  /* ---------------------------------------------------------------------
     Espacio — escala base 8
     --------------------------------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  --content-max: 1280px;
  --gutter: clamp(24px, 5vw, 64px);

  /* ---------------------------------------------------------------------
     Forma / elevación
     --------------------------------------------------------------------- */
  --radius: 2px;
  --radius-circle: 999px;
  --border-hair: 1px solid var(--sy-line);
  --shadow-card: 0 1px 2px rgba(20, 17, 14, 0.04), 0 12px 32px -16px rgba(20, 17, 14, 0.18);

  /* ---------------------------------------------------------------------
     Motion — CLAUDE.md §5
     --------------------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 0.62, 0.23, 0.98); /* power2.out */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); /* expo.out */
  --dur-fast: 0.45s;
  --dur-base: 0.8s;
  --dur-slow: 1.2s;

  /* ---------------------------------------------------------------------
     Header
     --------------------------------------------------------------------- */
  --header-h: 88px;
  --header-h-mobile: 72px;
  --z-header: 100;
  --z-drawer: 200;
  --z-transition: 300;
  --z-cursor: 400;
}

@media (max-width: 640px) {
  :root {
    --sp-8: 48px;
    --sp-12: 72px;
    --sp-16: 96px;
  }
}