/* =========================================================================
   FERNS MODA — tokens del sistema (briefing/design-system/tokens.css)
   NINGÚN color va escrito aquí: todo deriva de los tokens de la base (--b-NN, --n-NN),
   que fija inc/tokens.php. Mapeo documentado en README.md.
   Prefijo --fm-* para no chocar con los alias --c-* de la base.
   ========================================================================= */
:root {
  /* ---------- Escala Arena / Tinta (nombres del briefing) ---------- */
  --fm-sand-50:  var(--n-98);    /* fondo alterno */
  --fm-sand-100: var(--b-83);
  --fm-sand-200: var(--b-78);
  --fm-sand-300: var(--b-73);    /* Arena: color de marca */
  --fm-sand-400: var(--b-70);
  --fm-sand-500: var(--b-65);
  --fm-sand-600: var(--b-64);
  --fm-sand-700: var(--b-55);

  --fm-ink-900: var(--n-20);     /* Tinta: color de marca */
  --fm-ink-800: var(--n-22a);
  --fm-ink-700: var(--n-28);
  --fm-ink-500: var(--n-50);
  --fm-ink-400: var(--n-61);
  --fm-ink-300: var(--n-73);
  --fm-ink-200: var(--n-89);
  --fm-ink-100: var(--n-92);     /* fondo de foto de producto */
  --fm-white:   var(--c-white);

  /* ---------- Semánticos ---------- */
  --fm-bg:             var(--fm-white);
  --fm-bg-alt:         var(--fm-sand-50);
  --fm-bg-inverse:     var(--fm-ink-900);
  --fm-surface-media:  var(--fm-ink-100);
  --fm-text:           var(--fm-ink-900);
  --fm-text-muted:     var(--fm-ink-500);
  --fm-text-inverse:   var(--fm-sand-100);
  --fm-text-subtle-inverse: var(--fm-ink-400);
  --fm-accent:         var(--fm-sand-300);
  --fm-announce-bg:    var(--fm-ink-900);
  --fm-announce-text:  var(--fm-white);
  --fm-hero-bg:        var(--fm-ink-100);
  --fm-hero-bg-edge:   color-mix(in srgb, var(--fm-ink-100) 90%, var(--fm-ink-900));
  --fm-hero-glow:      color-mix(in srgb, var(--fm-ink-100) 80%, var(--fm-white));
  --fm-hero-shadow:    color-mix(in srgb, var(--fm-ink-900) 26%, transparent);
  --fm-hero-shadow-floor: color-mix(in srgb, var(--fm-ink-900) 34%, transparent);
  --fm-border:         var(--fm-ink-200);
  --fm-border-strong:  var(--fm-ink-900);
  --fm-border-inverse: color-mix(in srgb, var(--fm-sand-300) 18%, transparent);
  --fm-focus:          var(--fm-sand-500);
  --fm-hover:          var(--fm-sand-600); /* color de hover de enlaces/texto/iconos: arena, NUNCA azul */
  --fm-success:        var(--ok-48);
  --fm-error:          var(--danger-42);

  /* Chip estándar (ahorro, por mayor): verde pastel, texto verde oscuro, bordes rectos */
  --fm-chip-bg:        color-mix(in srgb, var(--ok-53) 14%, var(--fm-white));
  --fm-chip-text:      color-mix(in srgb, var(--ok-48) 85%, var(--fm-ink-900));
  --fm-ok-strong:      var(--ok-48);
  /* Notificación dorada ("Agrega N prendas más…"): oferta que brilla */
  --fm-note-gold-bg:   color-mix(in srgb, var(--warn-84) 20%, var(--fm-white));
  --fm-note-gold-line: color-mix(in srgb, var(--warn-73) 55%, var(--fm-white));
  --fm-note-gold-text: color-mix(in srgb, var(--warn-67) 55%, var(--fm-ink-900));
  --fm-note-ok-line:   color-mix(in srgb, var(--ok-53) 35%, var(--fm-white));
  /* Chip y nota rojos (pago contraentrega): mismo estilo que el chip estándar */
  --fm-chip-bad-bg:    color-mix(in srgb, var(--danger-50) 10%, var(--fm-white));
  --fm-chip-bad-text:  var(--danger-50);
  --fm-note-bad-line:  color-mix(in srgb, var(--danger-50) 30%, var(--fm-white));
  /* Nota informativa (arena claro) */
  --fm-note-sand-bg:   color-mix(in srgb, var(--fm-sand-300) 32%, var(--fm-white));

  /* ---------- Tipografía (familias: tokens de la base) ---------- */
  --fm-font-display: var(--font-display);
  --fm-font-sans:    var(--font-body);

  --fm-fs-hero:    clamp(2.75rem, 1.6rem + 4.9vw, 6rem);
  --fm-fs-mega:    clamp(3rem, 1.5rem + 6.4vw, 7.5rem);
  --fm-fs-h1:      clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fm-fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fm-fs-h3:      clamp(1.375rem, 1.2rem + .7vw, 1.875rem);
  --fm-fs-h4:      1.25rem;
  --fm-fs-body-lg: 1.125rem;
  --fm-fs-body:    1rem;
  --fm-fs-small:   .875rem;
  --fm-fs-label:   .6875rem;
  --fm-fs-micro:   .5625rem;

  --fm-fw-light: 300; --fm-fw-regular: 400; --fm-fw-medium: 500; --fm-fw-semibold: 600;
  --fm-lh-tight: 1; --fm-lh-snug: 1.15; --fm-lh-normal: 1.5;
  --fm-ls-display: -.01em;
  --fm-ls-label:   .08em;
  --fm-ls-wide:    .14em;

  /* ---------- Espacio (base 4px) ---------- */
  --fm-space-1: .25rem; --fm-space-2: .5rem;  --fm-space-3: .75rem; --fm-space-4: 1rem;
  --fm-space-5: 1.25rem; --fm-space-6: 1.5rem; --fm-space-8: 2rem;  --fm-space-10: 2.5rem;
  --fm-space-12: 3rem;  --fm-space-16: 4rem;  --fm-space-20: 5rem;
  --fm-gutter:    clamp(1rem, .6rem + 1.6vw, 1.5rem);
  --fm-grid-gap:  clamp(.5rem, .3rem + .8vw, 1rem);
  --fm-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --fm-container: var(--grid-max);
  --fm-header-h:  64px;
  --fm-announce-h: 28px;

  /* ---------- Forma, capas, movimiento ---------- */
  --fm-radius-0: 0;
  --fm-radius-pill: var(--radius-full);
  --fm-border-hair: 1px solid var(--fm-border);
  --fm-shadow-drawer: 0 20px 60px color-mix(in srgb, var(--fm-ink-900) 18%, transparent);
  --fm-z-header: 200; --fm-z-overlay: 9000; --fm-z-drawer: 9010; /* sobre el botón de WhatsApp (900), bajo el carrito lateral de la base (9998) */

  --fm-ease-out:    cubic-bezier(.22, 1, .36, 1);
  --fm-ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --fm-ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --fm-dur-fast: .2s; --fm-dur-base: .4s; --fm-dur-slow: .8s;

  /* ---------- Componentes ---------- */
  --fm-btn-h: 44px;
  --fm-btn-px: var(--fm-space-6);
  --fm-input-h: 48px;
  --fm-card-ratio: 4 / 5;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fm-dur-fast: 0s; --fm-dur-base: 0s; --fm-dur-slow: 0s; }
}