/* ==========================================================================
   AMMY TERRA — Sistema visual obligatorio (ERS seccion 2.1)
   No inventar valores. Todo el sitio consume estas variables.
   ========================================================================== */

:root {
  /* --- Fondo --- */
  --c-bg:            #F9F7F1;   /* marfil calido — fondo principal */
  --c-bg-alt:        #F6F1E7;   /* secciones alternas */
  --c-surface:       #FFFFFF;   /* tarjetas / header */
  --c-surface-warm:  #FDFCF9;   /* superficie calida secundaria */

  /* --- Verdes --- */
  --c-green:         #123D2B;   /* verde principal: header, footer, botones, titulos */
  --c-green-700:     #1F5A3C;   /* verde secundario: botones secundarios, badges */
  --c-green-600:     #2D6A4F;   /* verde secundario: iconografia, hover */
  --c-green-050:     #EAF1EA;   /* tinte suave para fondos de badge/icono */

  /* --- Acento --- */
  --c-terracotta:    #A85B36;   /* palabras destacadas, ofertas, acentos editoriales */

  /* --- Texto --- */
  --c-text:          #263129;
  --c-text-muted:    #5C665F;
  --c-border:        #D8DDD8;
  --c-border-soft:   #E7EAE6;

  /* --- Estados --- */
  --c-ok:            #2D6A4F;
  --c-ok-bg:         #E8F3EC;
  --c-warn:          #A85B36;
  --c-warn-bg:       #F7EDE7;
  --c-danger:        #8C2F2F;
  --c-danger-bg:     #F8EAEA;

  /* --- Tipografia --- */
  --font-title: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui:    "Inter", "Aptos", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-titulo: 600;      /* 500-700 */
  --fw-ui: 400;
  --fw-ui-med: 500;
  --fw-ui-semi: 600;

  /* Escala tipografica (px) */
  --fs-h1: 56px;
  --fs-h2: 38px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-eyebrow: 11px;
  --fs-price: 17px;

  --lh-tight: 1.12;
  --lh-title: 1.22;
  --lh-body: 1.65;

  --ls-eyebrow: .16em;   /* eyebrow en mayusculas */
  --ls-cat: .10em;       /* nombre de categoria en tarjeta */

  /* --- Radios --- */
  --r-card: 8px;
  --r-btn: 6px;
  --r-pill: 999px;
  --r-input: 6px;

  /* --- Sombras (muy suaves) --- */
  --sh-soft:  0 4px 20px rgba(18, 61, 43, .08);
  --sh-hover: 0 10px 32px rgba(18, 61, 43, .12);
  --sh-head:  0 2px 12px rgba(18, 61, 43, .06);

  /* --- Layout --- */
  --container: 1240px;   /* >=1280px */
  --container-wide: 1320px;
  --gutter: 24px;
  --topbar-h: 32px;
  --header-h: 80px;
  --header-h-sticky: 68px;   /* -15% al fijarse */

  /* --- Espaciado (base 8) --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  --t-fast: 180ms ease;
  --t-base: 240ms cubic-bezier(.16, 1, .3, 1);
}

/* Breakpoints de referencia (ERS seccion 11)
   >=1280  contenedor 1240  | categorias 4 col | productos 5 col | hero 42/58
   1024-79 contenedor calc(100% - 48px) | productos 4 col | hero 44/56
   768-1023 menu compacto | hero 1 col o 48/52 | categorias 2-3 | productos 3
   <768    header movil | hero apilado | categorias 2 | productos 2 | checkout 1 col
   <420    categorias 1-2 | producto 1 col
*/