/**
 * STACCIOLLA — Design Tokens
 * Maison Contemporaine
 *
 * Archivo único de variables CSS.
 * Todo el tema hereda de aquí. Nunca hardcodear valores en bloques.
 * Cargar desde functions.php antes que cualquier otro stylesheet.
 */

:root {

  /* ─────────────────────────────────────────
     COLORES
     ───────────────────────────────────────── */

  /* Fondos */
  --fe-cream:          #F5F0E8;   /* Fondo principal — papel de algodón cálido */
  --fe-cream-dark:     #EDE6D8;   /* Fondo secciones alternadas */
  --fe-white:          #FDFAF6;   /* Blanco cálido — cards, inputs */

  /* Oscuros */
  --fe-black:          #111111;   /* Texto principal, botones primarios */
  --fe-black-soft:     #1E1E1E;   /* Hover estados oscuros */
  --fe-charcoal:       #2C2C2C;   /* Textos secundarios sobre fondo claro */

  /* Acento */
  --fe-gold:           #B8986A;   /* Acento dorado — reglas, detalles, hover */
  --fe-gold-light:     #D4B896;   /* Gold suavizado — hover texto sobre negro */
  --fe-gold-muted:     #C4A97A;   /* Gold intermedio */
  --fe-gold-dark:      #8a6310;   /* Amber profundo — indicador stock bajo */

  /* Neutros */
  --fe-warm-gray:      #8C8279;   /* Texto terciario, eyebrows, placeholders */
  --fe-border:         #E0D8CE;   /* Bordes sutiles */
  --fe-border-dark:    #C8BFB4;   /* Bordes con más peso */

  /* Estados semánticos */
  --fe-error:          #b44;      /* Error — bordes, textos de validación */
  --fe-success:        #2e7d32;   /* Éxito — confirmaciones, delivered */
  --fe-warning:        #f57c00;   /* Aviso — en tránsito, pendiente */
  --fe-info:           #1976d2;   /* Información — estados neutros */

  /* ─────────────────────────────────────────
     TIPOGRAFÍA
     ───────────────────────────────────────── */

  --fe-font-display:   'Cormorant Garamond', Georgia, serif;
  /* Usar para: H1, H2, nombres de productos, manifesto, hero headline */

  --fe-font-body:      'Jost', system-ui, sans-serif;
  /* Usar para: navegación, botones, precios, eyebrows, body text, labels */

  /* Pesos */
  --fe-weight-light:    300;
  --fe-weight-regular:  400;
  --fe-weight-medium:   500;
  --fe-weight-semibold: 600;

  /* Tamaños — escala modular */
  --fe-size-xs:        0.6875rem;  /* 11px — eyebrows, legal */
  --fe-size-sm:        0.8125rem;  /* 13px — labels, captions */
  --fe-size-base:      1rem;       /* 16px — body */
  --fe-size-md:        1.125rem;   /* 18px — body grande */
  --fe-size-lg:        1.5rem;     /* 24px — subtítulos */
  --fe-size-xl:        2rem;       /* 32px — H3 */
  --fe-size-2xl:       2.75rem;    /* 44px — H2 */
  --fe-size-3xl:       4rem;       /* 64px — H1 */
  --fe-size-hero:      clamp(3.5rem, 7vw, 6.5rem);  /* Hero headline fluido */

  /* Interlineado */
  --fe-leading-tight:  1.05;
  --fe-leading-snug:   1.2;
  --fe-leading-normal: 1.7;
  --fe-leading-loose:  1.9;

  /* Letter spacing */
  --fe-tracking-tight:   -0.02em;
  --fe-tracking-normal:  0em;
  --fe-tracking-wide:    0.06em;
  --fe-tracking-wider:   0.12em;
  --fe-tracking-widest:  0.20em;   /* Eyebrows uppercase */

  /* ─────────────────────────────────────────
     ESPACIADO
     ───────────────────────────────────────── */

  --fe-space-1:   0.25rem;   /*  4px */
  --fe-space-2:   0.5rem;    /*  8px */
  --fe-space-3:   0.75rem;   /* 12px */
  --fe-space-4:   1rem;      /* 16px */
  --fe-space-6:   1.5rem;    /* 24px */
  --fe-space-8:   2rem;      /* 32px */
  --fe-space-12:  3rem;      /* 48px */
  --fe-space-16:  4rem;      /* 64px */
  --fe-space-20:  5rem;      /* 80px */
  --fe-space-24:  6rem;      /* 96px */
  --fe-space-32:  8rem;      /* 128px */
  --fe-space-40:  10rem;     /* 160px */

  /* Atajos semánticos */
  --fe-section-py:       var(--fe-space-24);   /* Padding vertical secciones */
  --fe-section-py-lg:    var(--fe-space-40);   /* Secciones grandes */
  --fe-container-px:     var(--fe-space-8);    /* Padding horizontal contenedor */

  /* ─────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────── */

  --fe-container-max:    1380px;   /* Máximo ancho del contenedor */
  --fe-container-tight:  960px;    /* Contenedor estrecho (texto editorial) */
  --fe-nav-height:       80px;     /* Altura fija del navbar */

  /* Breakpoints (reference only — use literal values in @media queries) */
  --fe-bp-sm:   480px;    /* móviles grandes */
  --fe-bp-md:   768px;    /* tablet portrait */
  --fe-bp-lg:   1024px;   /* tablet landscape / laptop */
  --fe-bp-xl:   1280px;   /* desktop */

  /* ─────────────────────────────────────────
     EFECTOS
     ───────────────────────────────────────── */

  --fe-radius:           2px;      /* Border-radius mínimo — no es un sitio redondeado */
  --fe-radius-sm:        1px;
  --fe-radius-pill:      999px;    /* Solo para badges si aplica */

  --fe-shadow-xs:        0 1px 2px rgba(17, 17, 17, 0.06);
  --fe-shadow-sm:        0 2px 8px  rgba(17, 17, 17, 0.08);
  --fe-shadow-md:        0 6px 24px rgba(17, 17, 17, 0.10);
  --fe-shadow-lg:        0 16px 48px rgba(17, 17, 17, 0.13);

  --fe-transition:       0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
  --fe-transition-fast:  0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  --fe-transition-slow:  0.55s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Overlay para imágenes hero */
  --fe-overlay-light:    rgba(17, 17, 17, 0.18);
  --fe-overlay-medium:   rgba(17, 17, 17, 0.40);
  --fe-overlay-heavy:    rgba(17, 17, 17, 0.62);

  /* ─────────────────────────────────────────
     WOOCOMMERCE — OVERRIDES SEMÁNTICOS
     ───────────────────────────────────────── */

  --wc-price-color:      var(--fe-black);
  --wc-sale-color:       var(--fe-gold);
  --wc-rating-color:     var(--fe-gold);
  --wc-btn-bg:           var(--fe-black);
  --wc-btn-color:        var(--fe-cream);
  --wc-btn-hover-bg:     var(--fe-black-soft);
}