/* ================================================
   HGW Colombia · variables.css
   Tokens de diseño globales
   ================================================ */
:root {
  /* Paleta de colores */
  --ink:    #0e0e0b;
  --ink2:   #1a1a15;
  --ink3:   #2a2a22;
  --cream:  #f5f0e8;
  --gold:   #c9a84c;
  --gold2:  #e8c96a;
  --gold3:  #f0d98a;
  --green:  #3d6b4f;
  --green2: #4d8b62;
  --green3: #6aad7e;
  --text:   #f5f0e8;
  --text2:  #c8c0b0;
  --text3:  #7a7268;
  --border:  rgba(201,168,76,0.20);
  --border2: rgba(201,168,76,0.40);

  /* Tipografías */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Outfit', system-ui, sans-serif;

  /* Espaciado fluido (mobile → desktop) */
  --sp-xs:  clamp(8px,  2vw, 12px);
  --sp-s:   clamp(12px, 3vw, 20px);
  --sp-m:   clamp(20px, 4vw, 32px);
  --sp-l:   clamp(32px, 6vw, 60px);
  --sp-xl:  clamp(48px, 8vw,100px);
  --sp-2xl: clamp(60px,10vw,140px);

  /* Tipografía fluida */
  --t-xs:   clamp(10px,2.5vw,12px);
  --t-s:    clamp(12px,  3vw,14px);
  --t-m:    clamp(14px,3.5vw,16px);
  --t-l:    clamp(16px,  4vw,20px);
  --t-xl:   clamp(24px,  5vw,36px);
  --t-h2:   clamp(30px,  6vw,58px);
  --t-hero: clamp(40px,  8vw,86px);

  /* Layout */
  --gap:   clamp(16px,4vw,48px);
  --max-w: 1200px;
}