/* ============================================================
   LURUPER SCHLEIFE — Colors & Type foundations
   A historic-factory letting brand: sage green, near-black,
   warm light-grey grounds. Geometric-grotesque display voice.
   ============================================================ */

/* --- Webfonts ----------------------------------------------
   The LIVE WEBSITE (Figma source of truth) implements three faces,
   all freely loadable — no substitution:
     • Clash Display  → display / hero headline (Medium 500)      [Fontshare · local files]
     • Nippo          → stat figures / numerals (Regular 32px)     [Fontshare · local files]
     • Archivo        → body, nav, labels, buttons (Reg + Bold)    [Google]
   Clash Display + Nippo ship as project files under fonts/ — the
   system works offline and needs no Fontshare request.
   NOTE: the printed branding guide specced "Bahnschrift Light" for
   the wordmark concept; the shipped site uses the three faces above.
   See README "Type" for that reconciliation. */
@font-face { font-family: 'Clash Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/ClashDisplay-400.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/ClashDisplay-500.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/ClashDisplay-600.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/ClashDisplay-700.woff2') format('woff2'); }
@font-face { font-family: 'Nippo'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/Nippo-400.woff2') format('woff2'); }
@font-face { font-family: 'Nippo'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/Nippo-500.woff2') format('woff2'); }
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLOR ---------- */
  --green:        #6E7F6F;  /* primary sage — logo, buttons, accent blocks */
  --green-press:  #5B6A5C;  /* darker sage — hover / pressed */
  --green-soft:   #87887F;  /* sage knocked back ~70% over imagery */
  --green-tint:   #E4E8E3;  /* pale sage wash — section grounds, chips */

  /* ---------- ACCENT — signal pink ----------
     A deliberate spark against the muted sage/grey world: hot
     signal pink. Use SPARINGLY: highlights, availability tags, key
     CTAs, never for large grounds. Sage stays the lead color.
     For small text on white use --accent-press (AA); the base tone
     only passes contrast for large/bold type. */
  --accent:       #FB4685;  /* signal pink — highlights, tags, key CTA */
  --accent-press: #D6175E;  /* darker pink — hover / pressed, text on white */
  --accent-tint:  #FEE3ED;  /* pale pink wash — chips, soft highlights */
  --on-accent:    #FFFFFF;  /* text on accent */

  /* ---------- ACCENT 02 — acid ----------
     Second spark: acid yellow-green. So light it carries INK text,
     never white. Marker-style highlights, tags, hover flashes.
     Same rule: sparingly, never as a large ground. */
  --accent-2:       #E9FB46;  /* acid — marker highlights, tags */
  --accent-2-press: #CFE218;  /* darker acid — hover / pressed */
  --accent-2-tint:  #F8FDD4;  /* pale acid wash — chips, soft highlights */
  --on-accent-2:    #1E1E1E;  /* text on acid is always ink */

  /* ---------- INK / TEXT ---------- */
  --ink:          #1E1E1E;  /* hero copy + headlines (rgb 30,30,30) */
  --black:        #000000;  /* stat figures + nav (pure black) */
  --fg-1:         #1E1E1E;  /* primary text */
  --fg-2:         #1E1E1E;  /* body copy */
  --fg-3:         #6B6B6B;  /* muted labels, captions */
  --on-green:     #FFFFFF;  /* text on sage */

  /* ---------- GROUNDS ---------- */
  --bg:           #D9D9D9;  /* page-top grey (rgb 217) */
  --bg-2:         #EEEEEE;  /* frame base / secondary panel (rgb 238) */
  --surface:      #FFFFFF;  /* cards / floating surfaces */
  --page-gradient: linear-gradient(180deg, #D9D9D9 0%, #FFFFFF 50%); /* @kind color */

  /* ---------- LINES ---------- */
  --line:         rgba(26,26,26,0.14);  /* hairline dividers */
  --line-strong:  rgba(26,26,26,0.28);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Clash Display', 'Segoe UI', sans-serif;  /* hero / headlines */
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif; /* body / nav / buttons / labels */
  --font-num:     'Nippo', 'Archivo', sans-serif; /* stat figures, m², years */

  /* ---------- TYPE SCALE (desktop, from Figma) ---------- */
  --fs-display:   40px;  /* hero headline + sub (Clash Display 500) */
  --fs-h1:        40px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-stat:      32px;  /* big figures: 7.012 m² (Nippo) */
  --fs-lead:      20px;
  --fs-body:      16px;  /* Archivo body */
  --fs-small:     14px;  /* Archivo labels */
  --fs-label:     14px;  /* stat labels (Archivo 14) */

  --lh-tight:     1.02; /* @kind other */
  --lh-snug:      1.18; /* @kind other */
  --lh-body:      1.55; /* @kind other */

  /* ---------- RADII / SHADOW / SPACE ---------- */
  --r-sm: 0px;     /* the brand is hard-edged — square by default */
  --r-md: 2px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.08);
  --shadow-lift: 0 2px 6px rgba(26,26,26,0.10), 0 18px 48px rgba(26,26,26,0.14);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
}

/* ============================================================
   SEMANTIC TYPE — apply with .ls-* classes
   ============================================================ */
.ls-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--ink);
}
.ls-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
}
.ls-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
}
.ls-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}
.ls-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-2);
}
.ls-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.42;
  color: var(--fg-2);
}
.ls-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}
/* Stat label / small meta — Archivo 14, near-black, normal case (per Figma) */
.ls-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black);
}
/* Big numeric figures — Nippo 32, pure black */
.ls-stat {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--black);
  font-feature-settings: 'tnum' 1;
}
/* Nav item — Archivo Bold 16, pure black */
.ls-nav {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--black);
}