/* ============================================================
   Desiré Carneiro Imóveis — Colors & Type
   ============================================================
   Brand: Imobiliária especializada em lotes/terrenos em
   Ponta Porã-MS. Vibe: "luxo acessível", terra/crescimento,
   familiar, caloroso, aspiracional mas confiável.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&family=Dancing+Script:wght@500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ----------
     Greens: terra, estabilidade, crescimento.
     Gold: luxo acessível, urgência, destaque.
     Cream: respiro.
     Red: selos de oferta.
     WhatsApp: EXCLUSIVO para o CTA. */

  /* Greens (primary spine) */
  --green-950: #0F2A1F;   /* deepest — large surfaces, headers */
  --green-900: #143524;   /* hero gradient base */
  --green-800: #1B3A2F;   /* primary brand green */
  --green-700: #234A3A;   /* card surfaces on green bg */
  --green-600: #2D5A3D;   /* secondary, buttons */
  --green-500: #3C6E4E;   /* hover/active highlight */
  --green-400: #5C8B6C;   /* muted accent */
  --green-200: #B8CDBE;   /* very light accent on cream */

  /* Gold / Mostarda (signature accent) */
  --gold-900: #8A6712;    /* darkened gold for press states */
  --gold-700: #B8881A;    /* mid gold, borders */
  --gold-600: #D4A017;    /* primary gold — selos, CTAs secundários */
  --gold-500: #E8C547;    /* destaque luminoso */
  --gold-400: #F2D77A;    /* glow / inner highlight */
  --gold-200: #F7E9B8;    /* gold tint on cream */

  /* Cream / Off-white */
  --cream-50:  #FBF8F0;
  --cream-100: #F5F1E8;   /* default light surface */
  --cream-200: #ECE5D2;
  --cream-300: #DDD3B6;

  /* Red (urgência / selo apenas) */
  --red-700:  #6B2114;
  --red-600:  #8B2E1F;    /* selo "Oportunidade" */
  --red-500:  #B0432B;

  /* WhatsApp — uso exclusivo no CTA principal */
  --whatsapp:        #25D366;
  --whatsapp-dark:   #1FB855;
  --whatsapp-darker: #128C7E;

  /* Neutrals (warm-leaning, never cool gray) */
  --ink-950: #0B1A12;     /* near-black with green undertone */
  --ink-800: #1F2A23;
  --ink-600: #4A5A50;
  --ink-400: #7C8A82;
  --ink-200: #C9D0CB;
  --ink-100: #E6EAE7;
  --paper:   #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --bg-page:        var(--cream-100);
  --bg-page-dark:   var(--green-900);
  --bg-card:        var(--paper);
  --bg-card-dark:   var(--green-800);
  --bg-elevated:    var(--cream-50);

  --fg-primary:     var(--ink-950);
  --fg-secondary:   var(--ink-600);
  --fg-muted:       var(--ink-400);
  --fg-on-dark:     var(--cream-50);
  --fg-on-dark-muted: #C9D9C9;
  --fg-accent:      var(--gold-600);

  --border-subtle:  rgba(15, 42, 31, 0.08);
  --border-default: rgba(15, 42, 31, 0.16);
  --border-gold:    var(--gold-600);
  --border-gold-soft: rgba(212, 160, 23, 0.35);

  /* CTA / interactive */
  --cta-bg:           var(--whatsapp);
  --cta-bg-hover:     var(--whatsapp-dark);
  --cta-fg:           #FFFFFF;
  --button-primary-bg:        var(--green-800);
  --button-primary-bg-hover:  var(--green-700);
  --button-secondary-bg:      var(--gold-600);
  --button-secondary-bg-hover:var(--gold-700);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-price:   'Oswald', 'Inter', sans-serif; /* condensed bold for preço/oferta */
  --font-script:  'Dancing Script', 'Allura', cursive; /* assinatura Desiré */

  /* Type scale (mobile-first; landing page uses these directly) */
  --fs-display:  clamp(40px, 7vw, 72px);   /* "Pare de Pagar Aluguel!" */
  --fs-h1:       clamp(32px, 5vw, 56px);
  --fs-h2:       clamp(26px, 3.6vw, 40px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-price-xl: clamp(64px, 11vw, 120px); /* "499" */
  --fs-price-lg: clamp(40px, 6vw, 64px);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.18em; /* uppercase eyebrows */

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADIUS ---------- */
  --r-sm:   8px;
  --r-md:   12px;   /* default — cantos arredondados suaves */
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm, never cool gray) ----------
     Sombras tingidas com verde escuro para sentir "quente". */
  --shadow-xs: 0 1px 2px rgba(15, 42, 31, 0.08);
  --shadow-sm: 0 2px 6px rgba(15, 42, 31, 0.10);
  --shadow-md: 0 8px 20px rgba(15, 42, 31, 0.14);
  --shadow-lg: 0 16px 40px rgba(15, 42, 31, 0.20);
  --shadow-xl: 0 28px 60px rgba(15, 42, 31, 0.28);
  --shadow-gold-glow: 0 0 0 1px rgba(212,160,23,0.55), 0 10px 28px rgba(212,160,23,0.30);
  --shadow-cta:       0 8px 22px rgba(37, 211, 102, 0.45);
  --shadow-inset-gold: inset 0 0 0 1px var(--gold-600), inset 0 1px 0 rgba(255,255,255,0.15);

  /* ---------- GRADIENTS ---------- */
  --grad-green:        linear-gradient(160deg, var(--green-900) 0%, var(--green-700) 100%);
  --grad-green-deep:   linear-gradient(180deg, var(--green-950) 0%, var(--green-800) 100%);
  --grad-gold:         linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
  --grad-gold-shine:   linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 45%, var(--gold-700) 100%);
  --grad-red-seal:     linear-gradient(180deg, var(--red-500) 0%, var(--red-700) 100%);
  --grad-cream-fade:   linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  --grad-image-veil:   linear-gradient(180deg, rgba(15,42,31,0.0) 40%, rgba(15,42,31,0.85) 100%);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 700; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-700);
}

.signature {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 36px;
  color: var(--cream-50);
  line-height: 1;
}

.price {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: var(--fs-price-xl);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-secondary); text-wrap: pretty; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-600); }

strong, b { font-weight: 700; color: var(--fg-primary); }
em, i    { font-style: italic; }