/* ===========================================================
   nong · Design Tokens — V3.1 (Editorial Reboot)
   Schwarz · Hell-Creme · Acid Lime
   Schrift: Helvetica Neue (Original); OCR-B nur sparsam
   =========================================================== */

:root {
  /* ---------- Color · Brand ---------- */
  --c-ink:        #0A0A0A;
  --c-ink-soft:   #1C1C1A;
  --c-paper:      #FBF8EF;   /* sehr hell-creme, fast off-white */
  --c-paper-2:    #F2EDDB;   /* eine Stufe tiefer */
  /* Minimal abgedunkelt (25.08.) für bessere Lesbarkeit auf Creme:
     #C8FF00 kam dort auf 1,11:1, #B0E000 auf 1,46:1. Als Fläche mit
     schwarzem Text darauf weiterhin sehr kontraststark (12,7:1). */
  --c-acid:       #B0E000;   /* Komplementär-Akzent — der EINE Grünton */
  /* Es gab lange zwei Grüntöne. Der dunklere sollte Text auf hellem Grund
     lesbarer machen, schaffte das aber nicht (1,65:1 statt der nötigen 3:1)
     und fiel nur als Bruch auf. Seit 25.08. identisch — wer den Ton ändert,
     ändert ihn an einer Stelle. */
  --c-acid-deep:  var(--c-acid);
  --c-muted:      #918A78;   /* sanftes Subtext-Grau */
  --c-rule:       #1C1C1A;
  --c-rule-soft:  #E4DDC8;

  /* ---------- Semantic ---------- */
  --bg:           var(--c-paper);
  --bg-invert:    var(--c-ink);
  --fg:           var(--c-ink);
  --fg-invert:    var(--c-paper);
  --accent:       var(--c-acid);

  /* ---------- Type ----------
     Montserrat für Überschriften, Manrope für Fließtext (Stand 25.08.).
     Die "mono"-Rolle (Labels, Kicker, Meta) läuft über uppercase +
     tracking auf der Body-Schrift, nicht über einen eigenen Font. */
  --font-display: "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono:    "Manrope", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  /* Gewicht aller Ueberschriften. 08-corporate-design.md (19.05.) legt fuer
     H1/H2/H3 Montserrat 700 fest — eine Zeile hier stellt die ganze Site um. */
  --fw-display:  var(--fw-bold);

  /* Editorial type scale — ruhig, schlanker (eine Stufe kleiner als v3.1) */
  --fs-micro:    clamp(0.7rem,   0.66rem + 0.18vw, 0.76rem);
  --fs-small:    clamp(0.82rem,  0.78rem + 0.2vw, 0.9rem);
  --fs-body:     clamp(1rem,     0.95rem + 0.22vw, 1.1rem);
  --fs-lead:     clamp(1.15rem,  1.05rem + 0.5vw, 1.4rem);
  --fs-h3:       clamp(1.45rem,  1.2rem + 1vw, 2.1rem);
  --fs-h2:       clamp(2.1rem,   1.5rem + 2.4vw, 3.6rem);
  --fs-h1:       clamp(2.8rem,   2rem + 4.8vw,   6.2rem);
  --fs-display:  clamp(4rem,     2.5rem + 8vw,  11rem);

  --lh-tight:    0.92;
  --lh-snug:     1.08;
  --lh-normal:   1.5;
  --lh-loose:    1.7;

  --ls-tight:    -0.025em;
  --ls-mono:     0.12em;   /* mehr tracking, weil Helvetica keine echte Mono-Schrift ist */

  /* ---------- Layout · editorial / mittig · viel Außenraum ---------- */
  --container:        1040px;
  --gutter-side:      clamp(2rem, 4vw + 0.5rem, 6rem);     /* Innenabstand der Section-Frames */
  --gutter-inner:     clamp(1rem, 2vw, 2rem);
  --section-y:        clamp(7rem, 14vw, 15rem);            /* sehr ruhig */
  --section-y-tight:  clamp(4rem, 7vw, 7rem);

  /* ---------- Borders ---------- */
  --bw:        1px;
  --bw-strong: 2px;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --dur-1:     180ms;
  --dur-2:     320ms;
  --dur-3:     560ms;

  --z-bg:      0;
  --z-content: 10;
  --z-nav:     50;
  --z-overlay: 80;
}

/* ===========================================================
   Reset
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--c-acid); color: var(--c-ink); }

/* ===========================================================
   Editorial Utilities
   =========================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-side);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

.mono   { font-family: var(--font-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; font-size: var(--fs-small); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-muted); }
.lowercase { text-transform: lowercase; }
.rule { height: 1px; background: var(--c-rule); border: 0; margin: 0; }
.rule--soft { background: var(--c-rule-soft); }

.invert { background: var(--bg-invert); color: var(--fg-invert); }
.invert .eyebrow { color: rgba(248,244,232,0.55); }
.invert ::selection { background: var(--c-acid); color: var(--c-ink); }