/* ============================================================
   EMMA & PAUL VENTURES — Design Tokens · v1.0 (Juli 2026)
   Quelle der Wahrheit für Farbe, Typografie, Raum und Bewegung.
   Reihenfolge der Einbindung:
     1. fonts/fonts.css   2. brand/tokens.css   3. brand/components.css
   Charakter: editorial, ruhig, präzise — dunkel als Heimat,
   Lime als einziger lauter Moment.
   ============================================================ */

:root{
  /* ---------- Farbe · Kernpalette ---------- */
  --ep-color-black:      #0A0A09;  /* Ink Black — Standardgrund digital */
  --ep-color-true-black: #000000;  /* Pure Black — Logo-Kacheln, Avatare */
  --ep-color-paper:      #F4F4EF;  /* Paper White — Text auf Dunkel, Grund hell */
  --ep-color-lime:       #CAFF4E;  /* Signal Lime — die eine Markenfarbe */
  --ep-color-stone:      #9C9C93;  /* Stone Grey — Sekundärtext auf Dunkel */
  --ep-color-stone-deep: #6B6B63;  /* Stone Deep — Sekundärtext auf Hell */

  /* ---------- Farbe · abgeleitet ---------- */
  --ep-color-surface:    #141412;                    /* Fläche auf Schwarz */
  --ep-color-surface-2:  #1C1C1A;                    /* Fläche, 2. Ebene */
  --ep-color-hairline:   rgba(244,244,239,.14);      /* Linien auf Dunkel */
  --ep-color-hairline-light: rgba(10,10,9,.16);      /* Linien auf Hell */
  --ep-color-lime-tint:  rgba(202,255,78,.10);       /* Glow/Flächen-Hauch */

  /* ---------- Semantische Aliase (Standard = dunkler Kontext) ---------- */
  --bg:       var(--ep-color-black);
  --ink:      var(--ep-color-paper);
  --muted:    var(--ep-color-stone);
  --accent:   var(--ep-color-lime);
  --hairline: var(--ep-color-hairline);
  --surface:  var(--ep-color-surface);

  /* ---------- Typografie ---------- */
  --ep-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ep-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ep-text-display-xl: clamp(44px, 8vw, 104px);  /* Hero / H1 */
  --ep-text-display-l:  clamp(28px, 3vw, 40px);   /* Sektionstitel */
  --ep-text-display-m:  clamp(24px, 2.6vw, 32px); /* Kartentitel */
  --ep-text-quote:      clamp(26px, 3.6vw, 44px); /* Zitate, große Links */
  --ep-text-lead:       clamp(16px, 1.4vw, 18px); /* Intro-Absätze */
  --ep-text-body:       16px;
  --ep-text-small:      15px;
  --ep-text-label:      13px;                     /* Nav, Buttons, Legales */
  --ep-text-eyebrow:    12px;                     /* Vorzeile, Tags */

  --ep-leading-display: 1.05;
  --ep-leading-tight:   1.2;
  --ep-leading-quote:   1.25;
  --ep-leading-body:    1.6;

  --ep-tracking-tight:  -0.01em;   /* große Serif-Zeilen */
  --ep-tracking-label:   0.08em;   /* Nav, Buttons */
  --ep-tracking-eyebrow: 0.18em;   /* Vorzeilen, Tags — immer VERSALIEN */

  --ep-measure: 56ch;              /* max. Zeilenlänge Fließtext */

  /* ---------- Layout & Raum ---------- */
  --ep-max-width: 1120px;
  --ep-page-pad:  clamp(20px, 5vw, 56px);
  --ep-section-y: clamp(56px, 9vh, 104px);   /* Standard-Sektionsrhythmus */
  --ep-section-y-s: clamp(48px, 8vh, 88px);

  /* 4-px-Skala */
  --ep-space-1: 4px;
  --ep-space-2: 8px;
  --ep-space-3: 12px;
  --ep-space-4: 16px;
  --ep-space-5: 24px;
  --ep-space-6: 32px;
  --ep-space-7: 48px;
  --ep-space-8: 64px;

  /* Marke ist kantig-editorial: keine Rundungen an Flächen und Buttons. */
  --ep-radius: 0px;
  --ep-radius-round: 999px;        /* einzige Ausnahme: runde Avatare */

  /* ---------- Bewegung ---------- */
  --ep-ease:     cubic-bezier(.22, 1, .36, 1);
  --ep-dur-fast: .2s;              /* Hover, Farbe */
  --ep-dur-draw: 1.1s;             /* Linien zeichnen sich */
}

/* ============================================================
   Heller Kontext („Paper") — Dokumente, Memos, Print, Decks.
   Ein Container mit .ep-light dreht die semantischen Aliase.
   Regeln: Lime auf Hell NIE als Textfarbe, nur als Markerfläche
   mit schwarzem Text. Sekundärtext hell = Stone Deep.
   ============================================================ */
.ep-light{
  --bg:       var(--ep-color-paper);
  --ink:      var(--ep-color-black);
  --muted:    var(--ep-color-stone-deep);
  --hairline: var(--ep-color-hairline-light);
  --surface:  #FFFFFF;
  background: var(--bg);
  color: var(--ink);
}