/* ============================================================
   LVNG — Co-Living Operations & Investment
   Foundational tokens: color + type
   Load Google Fonts before this file, or rely on the @import below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --ink:         #15110D;  /* warm near-black — primary ink, dark surfaces */
  --ink-2:       #2A241E;  /* warm charcoal — elevated dark surfaces */
  --ember:       #EB622C;  /* the brand orange — sampled from the mark */
  --ember-deep:  #C44E20;  /* hover / pressed orange */
  --ember-tint:  #FBE3D6;  /* soft orange wash for fills/highlights */
  --paper:       #F5F1EA;  /* warm canvas — the default page background */
  --paper-2:     #EDE7DC;  /* recessed warm surface */
  --white:       #FFFFFF;  /* card surface */

  /* ---------- CLAY NEUTRAL SCALE (warm-tinted greys) ---------- */
  --clay-50:   #FAF7F2;
  --clay-100:  #F2ECE3;
  --clay-200:  #E4DBCD;
  --clay-300:  #D2C6B4;
  --clay-400:  #B3A48E;
  --clay-500:  #8C7C66;
  --clay-600:  #6B5D4A;
  --clay-700:  #4D4334;
  --clay-800:  #332C22;
  --clay-900:  #1C1813;

  /* ---------- SEMANTIC / DATA ---------- */
  --positive:       #2E7D5B;  /* returns up, occupancy, success */
  --positive-tint:  #DCEAE0;
  --negative:       #B5462E;  /* warm brick — risk / down */
  --negative-tint:  #F4DBD3;
  --caution:        #C98A1E;  /* warm amber — pending / attention */
  --caution-tint:   #F6E8CC;

  /* ---------- TEXT ROLES ---------- */
  --fg:          var(--ink);
  --fg-muted:    var(--clay-600);
  --fg-subtle:   var(--clay-500);
  --fg-inverse:  var(--paper);
  --fg-on-ember: #FFFFFF;

  /* ---------- LINES & SURFACES ---------- */
  --border:        var(--clay-200);
  --border-strong: var(--clay-300);
  --surface:       var(--white);
  --surface-sunken:var(--paper-2);

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- ELEVATION (warm-tinted shadows) ---------- */
  --shadow-sm: 0 1px 2px rgba(21,17,13,.06), 0 1px 1px rgba(21,17,13,.04);
  --shadow-md: 0 4px 12px rgba(21,17,13,.08), 0 1px 3px rgba(21,17,13,.05);
  --shadow-lg: 0 16px 40px rgba(21,17,13,.12), 0 4px 10px rgba(21,17,13,.06);
  --shadow-ember: 0 8px 24px rgba(235,98,44,.28);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- TYPE FAMILIES ---------- */
  /* One warm humanist family across the whole system — friendly, never computerized. */
  --font-display: 'Figtree', system-ui, sans-serif;  /* headlines & big numbers */
  --font-text:    'Figtree', system-ui, sans-serif;  /* body & UI */
  --font-mono:    'Figtree', system-ui, sans-serif;  /* kicker labels — used as letter-spaced caps, NOT monospace */

  /* ---------- TYPE SCALE ---------- */
  --t-display-xl: 900 72px/1.02 var(--font-display);
  --t-display:    800 56px/1.04 var(--font-display);
  --t-h1:         800 40px/1.08 var(--font-display);
  --t-h2:         700 30px/1.15 var(--font-display);
  --t-h3:         700 22px/1.25 var(--font-display);
  --t-body-lg:    400 18px/1.6  var(--font-text);
  --t-body:       400 16px/1.6  var(--font-text);
  --t-body-sm:    400 14px/1.55 var(--font-text);
  --t-caption:    400 13px/1.4  var(--font-text);
  --t-mono:       600 12px/1.35 var(--font-mono);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  background: var(--paper);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); color: var(--fg); letter-spacing: -0.02em; margin: 0; }
h2 { font: var(--t-h2); color: var(--fg); letter-spacing: -0.015em; margin: 0; }
h3 { font: var(--t-h3); color: var(--fg); letter-spacing: -0.01em; margin: 0; }
p  { font: var(--t-body); color: var(--fg); margin: 0; text-wrap: pretty; }
small { font: var(--t-caption); color: var(--fg-muted); }
a  { color: var(--ember-deep); text-decoration: none; }
a:hover { color: var(--ember); }

/* The brand's signature mono label — eyebrows, kickers, data tags */
.lvng-kicker {
  font: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember-deep);
}

/* Devoweled-style display lockup helper */
.lvng-display { font: var(--t-display); letter-spacing: -0.03em; }
.lvng-display-xl { font: var(--t-display-xl); letter-spacing: -0.035em; }

/* Tabular numerals for metrics & money */
.lvng-num { font-family: var(--font-display); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }