/* ============================================================
   D.E.C. INCORPORADORA — Design Tokens
   Colors, type, spacing, radii, shadows.
   Import this file at the root of any prototype:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* --- Webfonts ------------------------------------------------ */
/* The brand wordmark uses a refined geometric serif (Trajan-adjacent).
   Closest free-licensed match: Cormorant Garamond (serif display) +
   Cinzel (titling caps, used in the wordmark itself).
   For body, Source Sans 3 is a calm, professional grotesk that pairs
   well with classic serifs in real-estate brochure design. */

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

:root {
  /* ── BRAND CORE ────────────────────────────────────────────── */
  /* Sampled directly from the logo. */
  --dec-navy-900: #061a30;   /* deepest, used for backgrounds */
  --dec-navy-800: #0a2540;   /* primary brand navy (logo lines) */
  --dec-navy-700: #14385c;   /* secondary navy, hover */
  --dec-navy-600: #1f4775;   /* mid-tone navy */
  --dec-navy-500: #2e5b8f;   /* accent navy, links */
  --dec-navy-400: #5b7fa6;   /* muted navy, captions on light */
  --dec-navy-200: #b6c4d6;   /* navy-tinted surface */
  --dec-navy-100: #e3eaf2;   /* subtle navy wash */

  --dec-gold-900: #6b4a1c;   /* deep shadow gold */
  --dec-gold-800: #8a6628;   /* deep gold */
  --dec-gold-700: #a88838;   /* primary brand gold (mid-step) */
  --dec-gold-600: #c2a55a;   /* warm gold */
  --dec-gold-500: #d8b878;   /* lit gold (highlight on step) */
  --dec-gold-400: #e8d088;   /* soft champagne */
  --dec-gold-300: #f0dfa8;   /* pale gold tint */
  --dec-gold-100: #f7eed1;   /* champagne wash */

  /* ── NEUTRALS ──────────────────────────────────────────────── */
  /* Warm-leaning neutrals, like a classic brochure paper stock. */
  --dec-paper:    #fbf8f3;   /* warm off-white background */
  --dec-paper-2:  #f4efe6;   /* deeper paper tone */
  --dec-bone:     #ece6d8;   /* card / divider */
  --dec-stone:    #c9c1b1;   /* mid neutral */
  --dec-graphite: #4a4742;   /* warm graphite, body text alt */
  --dec-ink:      #1a1d22;   /* near-black for body copy */
  --dec-white:    #ffffff;

  /* ── SEMANTIC ──────────────────────────────────────────────── */
  --bg:            var(--dec-paper);
  --bg-elevated:   var(--dec-white);
  --bg-sunken:     var(--dec-paper-2);
  --bg-inverse:    var(--dec-navy-800);

  --fg:            var(--dec-ink);
  --fg-muted:      var(--dec-graphite);
  --fg-subtle:     #6e6a62;
  --fg-on-navy:    #f6efdb;
  --fg-on-gold:    var(--dec-navy-800);

  --brand:         var(--dec-navy-800);
  --brand-accent:  var(--dec-gold-700);
  --brand-accent-bright: var(--dec-gold-500);

  --border:        rgba(10,37,64,0.12);
  --border-strong: rgba(10,37,64,0.24);
  --border-gold:   rgba(168,136,56,0.4);

  --status-success: #2e6b4a;
  --status-warning: #b8862b;
  --status-error:   #a13b2c;
  --status-info:    var(--dec-navy-600);

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */
  --font-display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif; /* wordmark / title-case caps */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; /* editorial display */
  --font-sans:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; /* body, UI */
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — major-third (1.25) on a 16px base, classic editorial */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tracked-xl: 0.32em;  /* INCORPORADORA-style subtitles */
  --ls-tracked-lg: 0.18em;
  --ls-tracked-md: 0.08em;
  --ls-tight: -0.01em;

  /* ── SPACING (4px base) ────────────────────────────────────── */
  --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;
  --space-32: 128px;

  /* ── RADII — restrained, architectural ─────────────────────── */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ── SHADOWS — soft, paper-like, never punchy ─────────────── */
  --shadow-1: 0 1px 2px rgba(10,37,64,0.06), 0 1px 1px rgba(10,37,64,0.04);
  --shadow-2: 0 2px 6px rgba(10,37,64,0.08), 0 1px 2px rgba(10,37,64,0.04);
  --shadow-3: 0 8px 24px rgba(10,37,64,0.10), 0 2px 6px rgba(10,37,64,0.05);
  --shadow-4: 0 24px 60px rgba(10,37,64,0.16), 0 6px 16px rgba(10,37,64,0.06);
  --shadow-gold-glow: 0 0 0 1px rgba(168,136,56,0.4), 0 6px 18px rgba(168,136,56,0.18);

  /* ── MOTION ────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   140ms;
  --dur-normal: 240ms;
  --dur-slow:   420ms;

  /* ── LAYOUT ────────────────────────────────────────────────── */
  --container-narrow: 720px;
  --container-default: 1120px;
  --container-wide: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC ELEMENTS — opt-in by including this stylesheet.
   Use these as a baseline; components can override.
   ============================================================ */

html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* — Display (hero / cover): editorial serif, calm tracking — */
.dec-display,
h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--brand);
}

/* — Wordmark / titling caps — used for the brand-aligned chrome — */
.dec-titling {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked-md);
  font-weight: 500;
}

/* — Eyebrow / kicker — small, wide-tracked, navy or gold — */
.dec-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-tracked-xl);
  color: var(--brand-accent);
}

/* — Standard headings — */
h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(var(--fs-36), 4.6vw, var(--fs-60));
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-5);
  color: var(--fg);
}
h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(var(--fs-30), 3.4vw, var(--fs-48));
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--fg);
}
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 1.3;
  letter-spacing: var(--ls-tracked-md);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--fg);
}
h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-tracked-md);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  color: var(--fg-muted);
}

p { margin: 0 0 var(--space-4); max-width: 65ch; }
.lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  max-width: 60ch;
}

a {
  color: var(--dec-navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--dec-gold-700); }

small, .caption {
  font-size: var(--fs-12);
  color: var(--fg-subtle);
  letter-spacing: 0.01em;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Decorative gold rule — used between brand-section transitions */
.dec-rule-gold {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--dec-gold-500) 0%,
    var(--dec-gold-700) 50%,
    var(--dec-gold-500) 100%);
  border: 0;
  margin: var(--space-6) 0;
}

::selection {
  background: var(--dec-gold-300);
  color: var(--dec-navy-900);
}