/* =========================================================
   CHEMISTRY — Colors & Type Tokens
   Editorial luxury real-estate brand system
   ========================================================= */

/* Google Font substitutes (flag to client — recommended premium swaps below) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,300;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=block');

:root {
  /* =========================================================
     PALETTE — TWO-CHAMBER SYSTEM
     Built from the four reference images: the Porsche (airy),
     the terracotta-and-mural hallway (the bridge), the art-deco
     bar (moody), and the walnut dining room (airy). The system
     pairs an AIRY chamber with a MOODY chamber, bound by a shared
     set of warm-metal accents that carry across both.
     ========================================================= */

  /* ---------- AIRY CHAMBER — ecru, linen, walnut, stone ---------- */
  --bone:          #E3D9C2;   /* ecru — unbleached linen, cooler than cream */
  --paper:         #FAF7F1;   /* pale ecru — page background */
  --linen:         #D8CDB3;   /* deeper ecru — insets, cards */
  --stone:         #C2B59A;   /* warm beige — stone floor */
  --walnut:        #6B4A34;   /* deep grain */
  --walnut-dark:   #3E2A1D;   /* low-light walnut */

  /* ---------- MOODY CHAMBER — oxblood, ink, bronze-black ---------- */
  --ink:           #141210;   /* warm near-black (softer than true black) */
  --ink-900:       #1E1A16;   /* bar shadow · hallway undertone */
  --ink-800:       #2A2520;   /* charcoal with warmth */
  --oxblood:       #6B2418;   /* terracotta wall in shadow — deep brick */
  --oxblood-deep:  #4A1810;   /* darkest signature — lacquer */
  --terracotta:    #B8563C;   /* hallway wall in light — heritage terracotta */
  --terracotta-soft:#C98468;  /* hallway in warm fill light */

  /* ---------- SHARED METALS — the binder between chambers ---------- */
  --brass:         #B8935A;   /* warm brass · chair base in hallway */
  --bronze:        #8C6B3E;   /* bar trim · bronze mirror frame */
  --amber:         #D9A860;   /* mustard-yellow orchids in bar */
  --patina:        #3B3A34;   /* warm charcoal bridge tone */

  /* ---------- RARE COOL ACCENT — pavilion blue-hour ---------- */
  --dusk:          #3A4657;   /* blue-hour sky, pavilion reflection */
  --sage:          #7E8A72;   /* muted grey-green — hallway mural */

  /* ---------- LEGACY ALIASES ---------- */
  --clay:          var(--terracotta-soft);
  --moss:          var(--sage);
  --off-white:     var(--linen);

  /* ---------- COLOR — NEUTRAL SCALE (ecru-based) ---------- */
  --n-950: #141210;
  --n-900: #1E1A16;
  --n-800: #2A2520;
  --n-700: #3E3A32;
  --n-500: #6B655C;
  --n-400: #8E887C;
  --n-300: #ADA38C;
  --n-200: #C2B59A;
  --n-100: #D8CDB3;
  --n-50:  #E3D9C2;
  --n-0:   #ECE3CC;

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1:  var(--ink);        /* primary text on light */
  --fg-2:  var(--patina);     /* secondary text */
  --fg-3:  var(--n-500);      /* tertiary / captions */
  --fg-on-dark-1: var(--bone);
  --fg-on-dark-2: var(--n-300);

  --bg-1:  var(--paper);      /* page background */
  --bg-2:  var(--bone);       /* card / section */
  --bg-3:  var(--n-100);      /* inset */
  --bg-inverse: var(--ink);

  --rule:       rgba(20,18,16,0.12);
  --rule-strong:rgba(20,18,16,0.28);
  --rule-dark:  rgba(240,232,216,0.16);

  /* ---------- TYPE FAMILIES ---------- */
  /* PRIMARY DISPLAY — serif, editorial, optical-sized.
     Recommended PAID: 'GT Sectra Fine' (Grilli Type) — highest desire.
     Alt PAID: 'Tiempos Headline' (Klim). Fallback: 'Fraunces' (Google). */
  --font-display: 'Fraunces', 'GT Sectra Fine', 'Tiempos Headline',
                  'Canela', 'Didot', Georgia, serif;

  /* SECONDARY — a second serif voice for long-form editorial body.
     Recommended PAID: 'Tiempos Text' (Klim). Fallback: Fraunces soft opsz. */
  --font-serif-body: 'Fraunces', 'Tiempos Text', Georgia, serif;

  /* SANS — was Inter Tight; now Fraunces everywhere for unified type voice. */
  --font-sans: 'Fraunces', Georgia, serif;

  /* MONO — micro-labels, index marks, (parenthetical) tags à la Studio X.
     Recommended PAID: 'ABC Diatype Mono' (Dinamo) or 'JetBrains Mono'.
     Fallback: 'JetBrains Mono' (Google). */
  --font-mono: 'JetBrains Mono', 'ABC Diatype Mono', 'IBM Plex Mono',
               ui-monospace, monospace;

  /* ---------- TYPE — FLUID SCALE ---------- */
  --t-hero:    clamp(72px, 12vw, 200px);
  --t-display: clamp(56px, 8vw, 128px);
  --t-h1:      clamp(40px, 5vw, 72px);
  --t-h2:      clamp(32px, 3.6vw, 52px);
  --t-h3:      clamp(24px, 2.4vw, 34px);
  --t-h4:      20px;
  --t-lede:    clamp(20px, 1.6vw, 26px);
  --t-body:    17px;
  --t-small:   14px;
  --t-micro:   11px;

  /* ---------- SPACING (8pt baseline) ---------- */
  --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;
  --s-11: 192px;

  /* ---------- RADII — minimal, editorial ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- ELEVATION — quiet, paper-like ---------- */
  --shadow-1: 0 1px 0 rgba(14,14,14,0.06);
  --shadow-2: 0 12px 40px -12px rgba(14,14,14,0.18);
  --shadow-3: 0 24px 80px -20px rgba(14,14,14,0.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bez: cubic-bezier(0.65, 0.05, 0.36, 1); /* signature Chemistry ease */
  --dur-fast: 240ms;
  --dur-med:  480ms;
  --dur-slow: 900ms;
  --dur-cinematic: 1400ms;
}

/* =========================================================
   SEMANTIC ELEMENTS (use these directly)
   ========================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-serif-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "kern";
}

.h-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  text-wrap: balance;
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  text-wrap: balance;
}

.h-1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}

.h-2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}

.h-3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.lede {
  font-family: var(--font-serif-body);
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  font-variation-settings: "opsz" 24;
}

.body { font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.5; }

.eyebrow,
.label,
.micro {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.mono,
.tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* Parenthetical micro-label — signature pattern ( e.g. (01) (Featured) ) */
.paren-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  font-feature-settings: "tnum";
}
.paren-label::before { content: "("; }
.paren-label::after  { content: ")"; }

/* Accent — replaces italic for editorial emphasis on display type.
   Uses TERRACOTTA (heritage-orange) as the primary brand accent — warmer,
   more alive than oxblood. Oxblood remains available as a deeper alt
   (.accent-deep) for moody surfaces where vibrance needs to recede. */
.accent {
  color: var(--terracotta);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  letter-spacing: -0.01em;
}
.accent-deep {
  color: var(--oxblood);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  letter-spacing: -0.01em;
}
.on-dark .accent { color: var(--terracotta-soft); }
.on-dark .accent-deep { color: var(--terracotta); }

/* Horizontal rule — editorial hairline */
.rule { border: 0; border-top: 1px solid var(--rule); }
.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); }

/* Dark mode surfaces */
.on-dark { background: var(--ink); color: var(--fg-on-dark-1); }
.on-dark .h-hero, .on-dark .h-display, .on-dark .h-1,
.on-dark .h-2, .on-dark .h-3, .on-dark .lede { color: var(--fg-on-dark-1); }
.on-dark .eyebrow, .on-dark .mono, .on-dark .paren-label { color: var(--fg-on-dark-2); }
.on-dark .rule { border-top-color: var(--rule-dark); }