/* ============================================================================
   BIOMELISA · DESIGN TOKENS · variables.css
   Fuente de verdad: Design Tokens v1 · Sección 10 (:root completo)
   Sincronizado con Banco de Decisiones v23 (color, tipografía, espaciado).
   Regla: nunca usar valores hardcodeados en el CSS del sitio; siempre var(--token).
   ============================================================================ */

:root {

  /* ── COLORES ─────────────────────────────────── */
  --color-coral:           #EF8477;   /* Principal · CTAs, enlaces, acentos */
  --color-coral-dark:      #C0635A;   /* Hover/focus coral · énfasis */
  --color-verde-agua:      #D0E4DA;   /* Fondos de sección alternos, cajas info */
  --color-verde-agua-dark: #B8D4C8;   /* Bordes en verde agua, separadores */
  --color-beige:           #BFAD9A;   /* Tarjetas Colección, texto auxiliar */
  --color-blanco-roto:     #F5EFE6;   /* FONDO BASE de toda la web · NUNCA #FFFFFF */
  --color-verde-botanico:  #4A7A54;   /* H2 Biblioteca, iconos categoría, etiquetas (WEB) */
  --color-verde-bot-dark:  #3A6A44;   /* Hover verde botánico */
  --color-marron-texto:    #3A3028;   /* TODO el texto de cuerpo · footer · NUNCA #000000 */
  --color-gris-texto:      #5A4A3F;   /* Texto auxiliar, descripciones */
  --color-gris-suave:      #E8E0D8;   /* Bordes neutros, separadores finos */
  --color-fondo-verde:     #F0F6F3;   /* Fondos de fichas verdes */
  --color-fondo-coral:     #FDF5F4;   /* Fondos de fichas coral */
  --color-fondo-beige:     #FAF6F1;   /* Fondos de componentes cálidos */
  --color-fondo-gris:      #F6F4F2;   /* Fondos de celdas neutras en tablas */

  /* Colores de acción */
  --color-link:            #EF8477;
  --color-link-hover:      #C0635A;
  --color-focus:           #EF8477;
  --color-error:           #C0635A;
  --color-success:         #4A7A54;

  /* ── TIPOGRAFÍA ──────────────────────────────── */
  --font-editorial: "Cormorant Garamond", Georgia, serif;   /* H1 / H2 */
  --font-body:      "Lato", Arial, sans-serif;               /* Cuerpo / H3 / H4 / UI */

  --text-h1:    42px;   /* Cormorant Garamond 400 */
  --text-h2:    32px;   /* Cormorant Garamond 400 */
  --text-h3:    22px;   /* Lato 700 */
  --text-h4:    18px;   /* Lato 700 */
  --text-body:  17px;   /* Lato 400 */
  --text-nav:   14px;
  --text-label: 12px;
  --text-meta:  13px;
  --text-quote: 24px;   /* Cormorant Garamond italic */

  --lh-heading: 1.2;
  --lh-subhead: 1.3;
  --lh-body:    1.7;
  --lh-quote:   1.5;

  /* ── ESPACIADO (escala base 8px) ─────────────── */
  --space-xs:    8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl: 120px;

  --content-max:     1200px;   /* Anchura máxima del contenido */
  --content-text:     750px;   /* Anchura máxima de columna de lectura */
  --content-padding:   20px;

  --card-padding-desk: 24px;
  --card-padding-mob:  16px;
  --card-gap-desk:     24px;
  --card-gap-mob:      16px;
  --card-radius:        8px;

  /* ── BOTONES ─────────────────────────────────── */
  --btn-padding-desk: 14px 28px;
  --btn-padding-mob:  12px 20px;
  --btn-radius:         6px;
  --btn-min-touch:     44px;

  /* ── FORMULARIOS ─────────────────────────────── */
  --input-height:   48px;
  --input-padding:  12px 16px;
  --input-radius:    6px;

  /* ── SOMBRAS ─────────────────────────────────── */
  --shadow-card:       0 2px 12px rgba(58, 48, 40, 0.06);
  --shadow-card-hover: 0 6px 24px rgba(58, 48, 40, 0.12);
  --shadow-header:     0 2px 12px rgba(58, 48, 40, 0.08);

  /* ── BORDES ──────────────────────────────────── */
  --border-color:        #E8E0D8;
  --border-color-verde:  #B8D4C8;
  --border-color-coral:  #EF8477;
  --border-width:        1.5px;
  --border-radius-sm:    4px;
  --border-radius-md:    6px;
  --border-radius-lg:    8px;
  --border-radius-xl:   12px;

  /* ── FOCUS (ACCESIBILIDAD) ───────────────────── */
  --focus-ring:   0 0 0 3px rgba(239, 132, 119, 0.30);
  --focus-color:  #EF8477;
  --focus-offset: 2px;

  /* ── ANIMACIONES (150–500ms) ─────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-gentle: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fade-duration:     500ms ease;
  --fade-delay-step:    80ms;
  --fade-translate:     20px;

  /* ── BREAKPOINTS (referencia) ────────────────── */
  /* Móvil:   < 768px   — estilos base              */
  /* Tablet:  768px+    — @media (min-width: 768px) */
  /* Desktop: 1025px+   — @media (min-width: 1025px)*/
}

/* OBLIGATORIO: reducir movimiento cuando el sistema lo pide (D-070) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}