/* ============================================
   ROQUE COUNTRY — Design Tokens
   ADN visual: Elyse Residence × Roque Country Brand Guide
   ============================================ */

:root {

  /* --- COLORES --- */

  /* Fondos */
  --color-bg:              #121717;
  --color-bg-light:        #EDE8E0;
  --color-bg-stone:        #C8C8C4;
  --color-bg-accent:       #4E7268;

  /* Texto */
  --color-text:            #ffffff;
  --color-text-dark:       #3A3A3A;
  --color-text-muted:      rgba(255, 255, 255, 0.70);
  --color-text-muted-dark: rgba(58, 58, 58, 0.65);
  --color-text-subtle:     rgba(255, 255, 255, 0.50);

  /* Borde / Divisores */
  --color-border:          rgba(255, 255, 255, 0.20);
  --color-border-dark:     rgba(58, 58, 58, 0.20);

  /* CTA principal */
  --color-cta-bg:          #ffffff;
  --color-cta-text:        #4E7268;

  /* Overlays */
  --color-hero-overlay:    rgba(0, 0, 0, 0.45);
  --color-numeros-overlay: rgba(78, 114, 104, 0.82);

  /* Acento — Azul Roque Country */
  --color-accent:          #5B8DB8;
  --color-accent-muted:    rgba(91, 141, 184, 0.15);
  --color-accent-hover:    #4A7BA6;
  --color-on-accent:       #ffffff;


  /* --- TIPOGRAFÍA --- */

  --font-display:  'Fragment Serif', 'Playfair Display', serif;
  --font-heading:  'Fragment Glare', 'Cormorant Garamond', serif;
  --font-body:     'Inter 28 Pt', 'Inter', Arial, sans-serif;

  --text-display:  clamp(8rem, 22vw, 27rem);
  --text-h2:       clamp(2.5rem, 7vw, 9rem);
  --text-h3:       clamp(1.75rem, 3.5vw, 4rem);
  --text-h4:       1.5rem;
  --text-body:     1rem;
  --text-ui:       0.9rem;
  --text-caption:  0.75rem;

  --weight-display: 300;
  --weight-heading: 300;
  --weight-body:    400;

  --ls-display:  -0.06em;
  --ls-heading:  -0.03em;
  --ls-ui:        0.04em;
  --ls-body:      0px;


  /* --- ESPACIADO --- */

  --section-padding-v:  100px;
  --section-padding-h:  clamp(60px, 7vw, 120px);
  --section-gap:        120px;
  --border-radius-btn:  9999px;
  --image-offset:       32px;

  /* Mobile */
  --section-padding-v-mobile: 60px;
  --section-padding-h-mobile: clamp(20px, 5vw, 40px);

}