/* ============================================================
   TOKENS — Acatlán de Osorio · Helix Local
   Sistema de diseño: paleta barro + hueso, tipografía editorial
   ============================================================ */

:root {
  /* ── Paleta base ── */
  --barro:        #2c1810;
  --barro-deep:   #1a0e08;
  --tierra:       #5c2d1a;
  --tepalcate:    #8b4513;
  --arcilla:      #c4622a;
  --arcilla-2:    #d97a3f;
  --pitaya:       #c41e3a;
  --pitaya-claro: #e85d76;
  --ocre:         #c49a35;
  --ocre-pale:    #d9b75a;
  --arena:        #e8d5a3;
  --arena-soft:   #d4c188;
  --hueso:        #f5ede0;
  --blanco:       #faf7f2;
  --cielo:        #2d4a6b;
  --jade:         #4a6b4a;

  /* ── Tipografía ── */
  --serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --sans:  "Barlow", system-ui, -apple-system, sans-serif;
  --cond:  "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* ── Escala editorial ── */
  --t-display-xxl: clamp(72px, 11.5vw, 168px);
  --t-display-xl:  clamp(56px, 8.2vw, 124px);
  --t-display-l:   clamp(44px, 5.6vw, 88px);
  --t-display:     clamp(36px, 4.4vw, 64px);
  --t-h1:          clamp(30px, 3.4vw, 48px);
  --t-h2:          clamp(26px, 2.6vw, 36px);
  --t-h3:          clamp(20px, 1.8vw, 26px);
  --t-h4:          clamp(18px, 1.4vw, 21px);
  --t-body-l:      19px;
  --t-body:        17px;
  --t-small:       15px;
  --t-meta:        13px;
  --t-eyebrow:     12px;

  /* ── Espaciado ── */
  --gutter:    56px;
  --section-y: clamp(80px, 9vw, 168px);
  --maxw:      1320px;

  /* ── Radii ── */
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;

  /* ── Sombras ── */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 24px 60px -30px rgba(0,0,0,0.4);
}

/* ── Tema dark (barro) — default ── */
:root[data-theme="dark"],
:root:not([data-theme]) {
  --bg:          var(--barro);
  --bg-2:        var(--barro-deep);
  --bg-3:        #3a2018;
  --bg-card:     #361d12;
  --surface:     #2a1610;
  --fg:          var(--arena);
  --fg-mute:     #b89c66;
  --fg-dim:      #806b46;
  --line:        rgba(232, 213, 163, 0.13);
  --line-strong: rgba(232, 213, 163, 0.28);
  --accent:      var(--arcilla);
  --hot:         var(--pitaya);
  --editorial:   var(--ocre);
  --link:        var(--arena);
  --hover:       rgba(232, 213, 163, 0.06);
}

/* ── Tema light (hueso/arena) ── */
:root[data-theme="light"] {
  --bg:          var(--blanco);
  --bg-2:        var(--hueso);
  --bg-3:        #ece1c9;
  --bg-card:     #fbf6ec;
  --surface:     #f7f0e1;
  --fg:          var(--barro);
  --fg-mute:     #6e4a35;
  --fg-dim:      #9c7d68;
  --line:        rgba(44, 24, 16, 0.14);
  --line-strong: rgba(44, 24, 16, 0.32);
  --accent:      #a04e1f;
  --hot:         #a01830;
  --editorial:   #9c7820;
  --link:        var(--barro);
  --hover:       rgba(44, 24, 16, 0.05);
}

/* ── Densidad ── */
:root[data-density="compact"] { --section-y: clamp(56px, 6vw, 112px); }
:root[data-density="loose"]   { --section-y: clamp(112px, 12vw, 220px); }