/* ============================================================
   ALPES VISTA · Condominio Club — Design Tokens
   Colors + Type foundations extracted from the official brochure
   Cartagena, Colombia · www.alpesvista.com.co
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand palette ---------------------------------------- */
  /* Carbón / charcoal — textured dark grounds */
  --av-ink:        #14161A;   /* deepest, near-black */
  --av-charcoal:   #1B1E23;   /* primary dark surface */
  --av-slate:      #23272E;   /* raised dark surface / cards */
  --av-slate-2:    #2E333B;   /* hover / borders on dark */

  /* Gold — metallic accent (use as line, text, small fills) */
  --av-gold:       #C9A24E;   /* core gold */
  --av-gold-soft:  #E2C887;   /* highlight gold */
  --av-gold-deep:  #A07C34;   /* shadow gold */
  --av-gold-grad:  linear-gradient(120deg,#A07C34 0%,#E2C887 45%,#C9A24E 100%);

  /* Terracotta / copper — architectural warm secondary (balconies) */
  --av-copper:     #C2855E;
  --av-copper-soft:#D8A483;

  /* Warm neutrals — wood / beige / stone */
  --av-sand:       #C8BBA6;   /* wood panel beige */
  --av-sand-light: #E4DACA;   /* light wood / paper */
  --av-stone:      #B6B4AE;   /* brochure gray panels */
  --av-stone-light:#D5D3CD;

  /* Light surfaces & text */
  --av-paper:      #F4F1EC;   /* off-white page */
  --av-white:      #FFFFFF;

  /* Foreground text */
  --av-fg-on-dark:        #F2EFE9;  /* primary text on dark */
  --av-fg-on-dark-mute:   #A9A69F;  /* muted text on dark */
  --av-fg-on-light:       #23272E;  /* primary text on light */
  --av-fg-on-light-mute:  #6E6B64;  /* muted text on light */

  /* Hairlines */
  --av-line-on-dark:  rgba(226,200,135,0.28); /* gold hairline */
  --av-line-soft:     rgba(255,255,255,0.10);
  --av-line-on-light: rgba(35,39,46,0.12);

  /* ---- Type families ---------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif; /* elegant high-contrast serif */
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif; /* geometric brand sans */

  /* ---- Type scale (fluid) ----------------------------------- */
  --fs-display:  clamp(3rem, 9vw, 7rem);     /* hero serif */
  --fs-h1:       clamp(2.4rem, 6vw, 4.5rem);
  --fs-h2:       clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3:       clamp(1.4rem, 2.6vw, 2rem);
  --fs-stat:     clamp(3rem, 8vw, 6rem);     /* big numbers */
  --fs-lead:     clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:     clamp(0.98rem, 1.1vw, 1.05rem);
  --fs-eyebrow:  0.78rem;
  --fs-small:    0.82rem;

  /* Tracking */
  --tr-eyebrow: 0.32em;   /* wide brand caps */
  --tr-label:   0.18em;
  --tr-wordmark:0.12em;

  /* ---- Spacing / radius / shadow ---------------------------- */
  --space-section: clamp(4.5rem, 9vw, 9rem);
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;
  --shadow-soft:  0 18px 50px -20px rgba(0,0,0,0.45);
  --shadow-card:  0 12px 40px -16px rgba(0,0,0,0.55);
  --shadow-float: 0 10px 30px -6px rgba(0,0,0,0.5);
  --maxw: 1240px;
}

/* ============================================================
   Semantic defaults — opt in by adding class "av" on a root
   ============================================================ */
.av-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.av-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.av-label {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.av-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.75;
}
.av-gold-text {
  background: var(--av-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--av-gold);
}