/* ============================================================
   78 CARINA IMÓVEIS — Design Foundations
   Colors + Typography tokens
   Brand: luxury real estate. Gold on black, neoclassical,
   editorial serif. Warm, refined, quiet confidence.
   ============================================================ */

/* ---- Fonts ----------------------------------------------------
   SUBSTITUTION NOTE: the wordmark "78 CARINA" is set in a Trajan-
   style classical Roman capital (likely Adobe Trajan Pro, a paid
   font). We substitute CINZEL — the de-facto free Trajan
   alternative — for display caps, CORMORANT GARAMOND for editorial
   serif, and JOST for the geometric sans used in UI. If you have
   the real brand fonts, drop the .woff2 files into /fonts and
   swap the @font-face below.
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ---- Brand gold scale -------------------------------------- */
  --gold-100: #F6E6C0;   /* pale champagne wash */
  --gold-200: #F2D89B;
  --gold-300: #F2C66D;   /* bright highlight (logo gleam) */
  --gold-400: #E0B65E;
  --gold-500: #D1A95A;   /* PRIMARY brand gold (sampled) */
  --gold-600: #C19A4A;   /* antique gold */
  --gold-700: #A8833A;   /* deep gold */
  --gold-800: #87692D;   /* bronze shadow */
  --gold-900: #5E4A20;   /* darkest gilt */

  /* ---- Warm neutrals (black-anchored) ------------------------ */
  --black:    #000000;   /* true brand black (logo plate) */
  --ink-950:  #0A0908;   /* warm near-black — primary dark bg */
  --ink-900:  #11100C;   /* dark surface */
  --ink-850:  #171410;   /* elevated dark surface */
  --ink-800:  #211D16;   /* raised card on dark */
  --ink-700:  #2E2A20;   /* hairline borders / dividers on dark */
  --ink-600:  #4A4438;
  --ink-500:  #6E6757;
  --ink-400:  #938B78;   /* muted text on dark */
  --ink-300:  #B9B09A;
  --ink-200:  #D8CFBC;

  /* ---- Warm ivory / light surfaces --------------------------- */
  --ivory-50:  #FBF8F1;  /* lightest page bg */
  --ivory-100: #F7F2E8;  /* primary light surface */
  --ivory-200: #EFE8D9;  /* light card / panel */
  --ivory-300: #E4DAC6;  /* light divider */
  --cream:     #F3ECDD;  /* warm ivory text on dark */

  /* ---- Semantic: dark theme (primary brand context) ---------- */
  --bg:            var(--ink-950);
  --bg-elevated:   var(--ink-850);
  --bg-card:       var(--ink-800);
  --surface-line:  var(--ink-700);
  --fg:            var(--cream);       /* primary text on dark */
  --fg-muted:      var(--ink-400);     /* secondary text on dark */
  --fg-subtle:     var(--ink-500);
  --accent:        var(--gold-500);    /* primary interactive gold */
  --accent-hover:  var(--gold-300);    /* brighter on hover */
  --accent-press:  var(--gold-600);    /* deeper on press */
  --accent-ink:    var(--ink-950);     /* text ON gold fills */
  --border-gold:   rgba(209,169,90,0.22);
  --border-gold-strong: rgba(209,169,90,0.45);

  /* ---- Semantic: light theme (ivory editorial context) ------- */
  --l-bg:          var(--ivory-50);
  --l-surface:     var(--ivory-100);
  --l-card:        #FFFFFF;
  --l-line:        var(--ivory-300);
  --l-fg:          #1A1611;             /* ink on ivory */
  --l-fg-muted:    #6B6253;
  --l-accent:      var(--gold-700);     /* gold reads darker on light */

  /* ---- Status (used sparingly) ------------------------------- */
  --positive: #6E8B4F;   /* sage — "available / sold" tags */
  --negative: #A6483B;   /* terracotta — errors */
  --info:     #5A6B7A;   /* slate */

  /* ---- Typography families ----------------------------------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;        /* Roman caps */
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Jost', 'Century Gothic', system-ui, sans-serif;

  /* ---- Type scale (fluid-ish, px) ---------------------------- */
  --t-display:  64px;   /* hero display caps */
  --t-h1:       48px;
  --t-h2:       36px;
  --t-h3:       27px;
  --t-h4:       21px;
  --t-body-lg:  20px;
  --t-body:     17px;
  --t-small:    15px;
  --t-eyebrow:  12px;   /* letter-spaced label caps */

  /* tracking */
  --track-caps:   0.18em;   /* logo-echo wide tracking */
  --track-label:  0.24em;   /* eyebrow labels */
  --track-tight:  0.01em;

  /* ---- Radii (restrained — luxury favors near-square) -------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px base) ------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---- Elevation (soft, warm-tinted) ------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.65);
  --shadow-gold: 0 8px 30px -8px rgba(209,169,90,0.30);
  --ring-gold: 0 0 0 1px rgba(209,169,90,0.45);

  /* ---- Motion ------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle ease-out */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 460ms;

  /* ---- Layout ------------------------------------------------ */
  --header-h: 96px;
}

/* ============================================================
   Base element styles — semantic typographic defaults
   ============================================================ */

.cn-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1, .cn-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
}

h2, .cn-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.12;
}

h3, .cn-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
}

h4, .cn-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Eyebrow / overline label — the brand's signature small caps */
.cn-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--accent);
}

/* Display caps in the logo idiom (Cinzel, wide) */
.cn-caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: 500;
}

p, .cn-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.005em;
}

.cn-body-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.6;
}

.cn-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
}

/* Price / numeric — serif, the way listings present value */
.cn-price {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-feature-settings: "lnum" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }