/* ─────────────────────────────────────────────────────────────
   Potencial Imóvel — Design Tokens
   Single source of truth for color, type, spacing, radii, shadow.
   Import this file once at the top of any page or component.
   ───────────────────────────────────────────────────────────── */

/* Plus Jakarta Sans is used as the closest Google-Fonts substitute
   for the humanist sans seen in the brand applications. If/when the
   real font file arrives, drop it into /fonts and replace the @import. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand color scale (from the Paleta de Cores swatches) ── */
  --green-900: #085041;   /* deepest — backgrounds, dark hero, footers */
  --green-800: #0F6E56;   /* PRIMARY — header bar, primary actions, default solid */
  --green-700: #137a5f;   /* hover state for primary */
  --green-500: #1D9E75;   /* accent green — used on filled CTA pills, "Mais contratado" */
  --green-400: #5DCAA5;   /* mint — accent text, highlight phrases, decorative arrows */
  --green-200: #b9e4d2;   /* sparingly — chip bg, subtle hovers */
  --green-100: #E1F5EE;   /* light surface — page bg tints, "Imobiliárias" panel */
  --white:     #FFFFFF;

  /* ── Semantic colors ── */
  --bg-page:       #F6F8F7;       /* light app bg, slightly off-white */
  --bg-page-dark:  var(--green-900);
  --bg-surface:    var(--white);
  --bg-surface-dark: var(--green-800);
  --bg-tint:       var(--green-100);

  --fg-on-dark:        var(--white);
  --fg-on-dark-muted:  rgba(255,255,255,0.72);
  --fg-on-dark-faint:  rgba(255,255,255,0.5);
  --fg-accent-on-dark: var(--green-400);   /* mint highlight phrases on green */

  --fg-on-light:         var(--green-900); /* primary text on white — deep green, NOT pure black */
  --fg-on-light-muted:   #4A6B5E;
  --fg-on-light-faint:   #7E9990;
  --fg-accent-on-light:  var(--green-800); /* "Imóvel" wordmark, eyebrows */

  --border-on-dark:    rgba(255,255,255,0.18);
  --border-on-light:   #DCE7E1;
  --border-card:       #E4ECE8;

  /* ── Status / case-study accents (used in Resultado) ── */
  --tint-success-bg:   #DCF1E7;   /* "Valor pós-reforma" panel */
  --tint-warmth-bg:    #FCEBD2;   /* "Ganho" panel — soft beige */
  --tint-warmth-fg:    #8A5A1A;

  /* ── Type ── */
  --font-sans:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;
  --w-extrabold: 800;

  /* Type scale — derived from observed sizes in the surfaces */
  --t-display:  56px;   /* hero "Transformamos imóveis…" */
  --t-display-lh: 1.08;
  --t-h1:       40px;
  --t-h1-lh:    1.12;
  --t-h2:       28px;
  --t-h2-lh:    1.2;
  --t-h3:       20px;
  --t-h3-lh:    1.3;
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-body-lh:  1.55;
  --t-small:    14px;
  --t-eyebrow:  12px;   /* CAIXA ALTA com letter-spacing */
  --t-eyebrow-tracking: 0.14em;

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card, input */
  --radius-lg:   16px;   /* hero card, pacote card */
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Spacing (4-pt grid) ── */
  --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;

  /* ── Shadows (used very sparingly — brand prefers borders over elevation) ── */
  --shadow-card:  0 1px 2px rgba(8, 80, 65, 0.04), 0 4px 14px rgba(8, 80, 65, 0.06);
  --shadow-pop:   0 8px 28px rgba(8, 80, 65, 0.12);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ─────────────────────────────────────────────────────────────
   Semantic element styles — drop-in defaults for raw HTML
   ───────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--fg-on-light);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display family is the same family at heavier weights */
.t-display, h1.display {
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1, .t-h1 {
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  font-weight: var(--w-bold);
  letter-spacing: -0.015em;
}
h2, .t-h2 {
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
}
h3, .t-h3 {
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  font-weight: var(--w-semibold);
}
p, .t-body { font-size: var(--t-body); line-height: var(--t-body-lh); }
.t-body-lg { font-size: var(--t-body-lg); line-height: 1.5; }
.t-small   { font-size: var(--t-small); line-height: 1.45; }

/* Eyebrow / kicker — CAIXA ALTA tracked-out label, used a LOT */
.t-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
}

/* The signature mint-on-dark accent phrase. Use on a fragment of a hero
   line, e.g. <h1>Transformamos imóveis parados em <span class="t-mint">imóveis prontos para vender</span>.</h1> */
.t-mint   { color: var(--green-400); }
.t-deep   { color: var(--green-900); }

/* ── Pill / chip — appears in nav, filter chips, and pacote tags ── */
.pi-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  border: 1px solid var(--border-on-dark);
  color: var(--fg-on-dark);
  background: transparent;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pi-pill[aria-current="page"],
.pi-pill.is-active {
  background: var(--green-500);
  border-color: var(--green-500);
}
.pi-pill:hover { background: rgba(255,255,255,0.08); }

/* ── Card surface ── */
.pi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.pi-card--dark {
  background: var(--green-800);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--fg-on-dark);
}

/* ── Button ── */
.pi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-weight: var(--w-semibold);
  font-size: var(--t-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  font-family: inherit;
}
.pi-btn:active { transform: translateY(1px); }
.pi-btn--primary {
  background: var(--green-500);
  color: var(--white);
}
.pi-btn--primary:hover { background: var(--green-700); }
.pi-btn--secondary {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: rgba(255,255,255,0.35);
}
.pi-btn--secondary:hover { background: rgba(255,255,255,0.06); }
.pi-btn--ghost-light {
  background: transparent;
  color: var(--fg-on-light);
  border-color: var(--border-on-light);
}
.pi-btn--ghost-light:hover { background: var(--green-100); }