/* INREMA Redesign 2026 — Design-Tokens (EINZIGE Farbquelle, NIE Hardcode-Hex)
   Vollstaendig aus dem freigegebenen Prototyp. Verbindlich: docs/composition-spec.md
   Framework: fw design inrema-webseite (34 Marken-Farben) */

:root {
  /* Navy */
  --nv:      #0a1a30;  /* Primaer: Hero, dunkle Sektionen, Nav */
  --nv-mid:  #12305a;  /* Gradient-Licht, Hover auf Navy */
  --nv-deep: #08152a;  /* Kontrast-Band */
  --nv-foot: #07142a;  /* Footer */

  /* Gold */
  --go:      #c8a24d;  /* Akzent, CTA-Flaechen, Labels auf Navy */
  --go-dark: #b98a2e;  /* Gold auf hellem Grund (Eyebrows, Links) */
  --go-light:#e6c473;  /* Headline-Akzent auf Navy */

  /* Papier / Flaechen */
  --pa:      #f6f4ef;  /* Standard-Hintergrund */
  --pa-2:    #efece4;  /* abgesetzte Sektion */
  --wh:      #ffffff;  /* Karten */

  /* Linien / Rahmen (hell) */
  --card-bd: #e3dccd;  /* Kartenrahmen */
  --line:    #ddd6c8;  /* Trennlinien */
  --line-2:  #f0ece1;  /* feine Foot-Linie in Karten */
  --chip-bd: #d8d0c0;  /* Chip-/Pill-Rahmen auf Papier */
  --btn-ghost-bd:#cdc6b6; /* Ghost-Dark Button-Rahmen */

  /* Text auf Papier */
  --ink:     #15181f;
  --ink-2:   #2a2f3a;  /* kraeftiger Fliesstext (Antwort-Listen) */
  --muted:   #5c6270;
  --meta:    #8a8271;  /* Mono-Meta / Lesezeit auf Papier */

  /* Text auf Navy */
  --on-nv:       #eef2f8;
  --on-nv-quote: #dbe2ee;  /* Zitat-/Empfehlungstext */
  --on-nv-mut:   #aab6c9;
  --on-nv-mut2:  #c3ccdb;
  --on-nv-mut3:  #93a0b5;
  --on-nv-mut4:  #6c7a90;  /* sehr gedaempft (Chat-Karte Label) */
  --mono-nv:     #8493a8;  /* Mono-Label auf Navy */
  --ticker:      #5f6f86;  /* Proof-Ticker-Text */
  --foot-mut:    #7c89a0;  /* Footer-Fliesstext/Links */
  --foot-copy:   #5b6478;  /* Copyright-Zeile */

  /* Funktional */
  --alert:   #c0392b;  /* Trending/Alert-Rot (sparsam) */
  --live:    #5fbf7e;  /* Status-Gruen (Live-Punkt) */

  /* Marke */
  --link:       #b98a2e;
  --link-hov:   #8f6a20;
  --sel:        #c8a24d;

  /* Schriften */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --r-card:   16px;
  --r-btn:    7px;
  --r-input:  9px;
  --r-pill:   99px;

  /* Layout */
  --container: 1200px;        /* Content fuellt bis 1200px (VERBINDLICH) */
  --container-narrow: 1000px; /* nur fokussierte, zentrierte Bloecke (CTA) */
  --sidebar: 320px;           /* Seitenleiste im Content+Sidebar-Layout */
  --reading: 800px;           /* Lese-Spalte im Layout (nie allein < ~800) */
  --sec-pad-y: 120px;
  --sec-pad-x: 44px;

  /* ===== Hero-Maße (EINE Quelle — hier aendern = ueberall) =====
     Beispiel: Kopfbereich 82%->86% => nur --hero-vh anpassen. */
  --hero-vh:     82vh;    /* Anteil der Fensterhoehe */
  --hero-min:    660px;   /* Untergrenze (Inhalt passt sicher rein) */
  --hero-max:    820px;   /* Obergrenze */
  --hero-height: clamp(var(--hero-min), var(--hero-vh), var(--hero-max));

  /* ===== Typo-Skala (EINE Quelle pro Groesse) ===== */
  --fs-xs:        12.5px;                 /* Fussnote/Meta        (.t-xs) */
  --fs-sm:        14px;                   /* sekundaerer Text     (.t-sm) */
  --fs-md:        16px;                   /* Standardtext         (.t-md) */
  --fs-lg:        18px;                   /* betont               (.t-lg) */
  --fs-lead:      19px;                   /* Lead + Hero-Subtext  (.lead / .page-hero__sub) */
  --fs-mono-note: 13px;                   /* Mono-Label           (.mono-note) */
  --fs-h2:         clamp(27px, 3.2vw, 44px);/* Sektions-Ueberschrift (.sec-h2) — fasst laengere Saetze in eine Zeile */
  --fs-hero-title: clamp(27px, 3.6vw, 50px);/* Hero-Titel (.page-hero__title) — kurze Saetze passen in eine Zeile, auch mobil */
}