/* =============================================================
   CORBIN SCOTT REAL ESTATE — Foundations
   Colors, type, spacing tokens + semantic classes
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Cormorant+Garamond:ital,wght@1,400&display=swap');

:root {
  /* ---- Core color palette ---- */
  --color-obsidian: #0F0E0D;   /* Primary dark background */
  --color-graphite: #1F1D1B;   /* Secondary surface on dark */
  --color-bone:     #F2EEE5;   /* Primary light background */
  --color-ember:    #8A2424;   /* Accent only — rule, callouts, single-word emphasis */
  --color-stone:    #7A7064;   /* Tertiary text — captions, EST lines */
  --color-brass:    #9C7B3F;   /* PRINT ONLY — foil/emboss, never digital */

  /* ---- Semantic surfaces / text ---- */
  --bg:        var(--color-obsidian);
  --bg-elev:   var(--color-graphite);
  --bg-light:  var(--color-bone);

  --fg:        var(--color-bone);       /* default text on dark */
  --fg-on-light: var(--color-obsidian); /* default text on bone */
  --fg-muted:  var(--color-stone);      /* captions, EST */
  --fg-accent: var(--color-ember);

  /* ---- Type stacks ---- */
  --font-display:  'Archivo Black', 'Arial Black', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-data:     'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-italic:   'Cormorant Garamond', Georgia, serif;

  /* ---- Type scale (px) ---- */
  --size-wordmark-min: 22px;
  --size-wordmark-max: 200px;
  --size-h1: 38px;
  --size-h2: 28px;
  --size-h3: 20px;
  --size-lead: 18px;
  --size-body: 16px;
  --size-caption: 13px;
  --size-fine: 11px;
  --size-data-hero-min: 28px;
  --size-data-hero-max: 60px;
  --size-data-inline: 16px;

  --lh-paragraph: 1.6;
  --lh-compact: 1.4;
  --lh-tight: 1.05;

  /* ---- Spacing / rule device ---- */
  --rule-width-primary: 3px;
  --rule-width-standalone: 2px;
  --rule-color: var(--color-ember);

  --lockup-gap: 20px;          /* between rule and wordmark */
  --kw-divider-above: 40px;
  --kw-divider-below: 20px;
  --kw-divider-stroke: 0.5px;
  --kw-divider-color: rgba(242, 238, 229, 0.25); /* Bone @ 25% */

  /* ---- Min sizes ---- */
  --min-wordmark-digital: 32px;
  --min-stacked-digital: 40px;
  --min-mark-digital: 24px;

  /* ---- Spacing scale (8pt base, with one half-step) ---- */
  --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;

  /* ---- Borders / radii ----
     Sharp by default — radii are intentionally minimal.
     The brand is editorial and architectural; rounded corners are uncommon. */
  --radius-0: 0px;
  --radius-1: 2px;     /* photo containers only */
  --radius-pill: 999px; /* reserved for tag chips when needed */
  --border-hairline: 1px solid rgba(242, 238, 229, 0.18);
  --border-hairline-light: 1px solid rgba(15, 14, 13, 0.18);
}

/* ===== Semantic element styles ===== */

.cs-display,
h1.cs, h2.cs {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: inherit;
}

h1.cs {
  font-size: var(--size-h1);
  letter-spacing: 0.04em; /* +1 to +2 in the 22–28 range; tighter for 38 */
}
h2.cs {
  font-size: var(--size-h2);
  letter-spacing: 0.06em;
}

h3.cs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-h3);
  letter-spacing: 0.1em;       /* +2 */
  text-transform: uppercase;
  line-height: var(--lh-compact);
}

.cs-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-lead);
  line-height: var(--lh-paragraph);
}

p.cs, .cs-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--lh-paragraph);
  text-align: left;            /* NEVER justified */
}

.cs-caption {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

.cs-fine {
  font-family: var(--font-body);
  font-size: var(--size-fine);
}

.cs-data {
  font-family: var(--font-data);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.cs-data-hero {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: clamp(var(--size-data-hero-min), 4vw, var(--size-data-hero-max));
  letter-spacing: 0.02em;
  line-height: 1;
}

.cs-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

/* ===== The Rule Device =====
   The 3px Ember vertical bar is the brand's signature element.
   Always on the LEFT. Never the right. */

.cs-rule-left {
  position: relative;
  padding-left: calc(var(--rule-width-primary) + var(--lockup-gap));
}
.cs-rule-left::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--rule-width-primary);
  background: var(--color-ember);
}

/* Horizontal rule variant (stacked logo, section breaks) */
.cs-rule-top {
  position: relative;
  padding-top: 14px;
}
.cs-rule-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px;
  height: 2px;
  background: var(--color-ember);
}

/* ===== Utility ===== */
.cs-bg-obsidian { background: var(--color-obsidian); color: var(--color-bone); }
.cs-bg-graphite { background: var(--color-graphite); color: var(--color-bone); }
.cs-bg-bone     { background: var(--color-bone);     color: var(--color-obsidian); }

.cs-mono-num { font-variant-numeric: tabular-nums; }