/* ==========================================================================
   TOKENS — Dirección de arte: editorial, brutalismo cálido
   Paleta sin azules. Todo el sistema consume estas variables.
   ========================================================================== */

:root {
  /* --- Color: neutros cálidos --- */
  --c-bone:        #F4EFE6;  /* fondo principal (hueso) */
  --c-bone-deep:   #EDE6D9;  /* fondo alterno */
  --c-sand:        #E6DCCB;  /* superficies, tarjetas */
  --c-sand-deep:   #D6C8B1;  /* filetes y bordes marcados */
  --c-stone:       #8C8274;  /* texto terciario */

  /* --- Color: profundos --- */
  --c-charcoal:    #1F1C19;  /* texto principal y bloques oscuros */
  --c-ink:         #3A342E;  /* texto secundario */
  --c-olive:       #3E4234;  /* acento profundo */
  --c-olive-soft:  #5A5F4B;

  /* --- Color: acento --- */
  --c-terracotta:       #A65A3A;  /* CTA y énfasis */
  --c-terracotta-dark:  #8A4A2F;  /* hover */
  --c-terracotta-tint:  #EBD5C7;

  --c-whatsapp:    #25D366;

  /* --- Roles semánticos --- */
  --bg:            var(--c-bone);
  --bg-alt:        var(--c-bone-deep);
  --surface:       var(--c-sand);
  --text:          var(--c-charcoal);
  --text-muted:    var(--c-ink);
  --text-subtle:   var(--c-stone);
  --line:          var(--c-sand-deep);
  --line-strong:   var(--c-charcoal);
  --accent:        var(--c-terracotta);
  --accent-hover:  var(--c-terracotta-dark);
  --focus:         var(--c-terracotta);

  /* --- Tipografía --- */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala fluida (mobile-first → desktop) */
  --fs-xs:   0.75rem;                                   /* 12 */
  --fs-sm:   0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                      /* 16 */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17–19 */
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20–24 */
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);    /* 24–36 */
  --fs-2xl:  clamp(2rem, 1.4rem + 2.8vw, 3.5rem);       /* 32–56 */
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4.4vw, 5rem);       /* 40–80 */
  --fs-num:  clamp(3rem, 2rem + 4vw, 5.5rem);           /* numeración editorial */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --tracking-tight: -0.025em;
  --tracking-wide:  0.14em;

  /* --- Espaciado (base 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 75rem; /* 1200px */

  /* --- Forma: brutalismo cálido (aristas rectas) --- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-pill: 999px;
  --border-hair: 1px solid var(--line);
  --border-solid: 1px solid var(--line-strong);

  /* --- Elevación (mínima, cálida) --- */
  --shadow-soft: 0 1px 0 rgba(31, 28, 25, 0.06), 0 12px 32px -16px rgba(31, 28, 25, 0.25);
  --shadow-block: 6px 6px 0 var(--c-charcoal);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  /* --- Textura orgánica: grano SVG inline --- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}