/* ═══════════════════════════════════════════════════════════════════
   GuyGotAI_ — Design-Tokens
   DIE EINE QUELLE fuer Farben, Schriften und Abstaende der Website.

   Normativ ist docs/marke/DESIGN.md. Wer dort eine Farbe aendert,
   aendert sie hier — und nur hier.

   Reihenfolge im <head> jeder Seite:
     fonts.css  ->  tokens.css  ->  basis.css  ->  (seitenspezifisch)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Basispalette (DESIGN.md § 2.1) ───────────────────────────── */
  --ink:#141414;      --paper:#FFFFFF;
  --linen:#F7F6EF;    --stone:#E4E4E4;
  --lime:#EAFF00;

  /* ── Abstufungen (DESIGN.md § 2.2) ────────────────────────────── */
  --ink-900:#141414;  --ink-800:#1F1F1D;  --ink-700:#2E2E2A;
  --ink-600:#3D3D38;  --ink-400:#6E6E66;  --ink-300:#8E8E85;
  --linen-100:#FBFAF6; --linen-200:#F7F6EF; --linen-300:#EFEDE4;
  --stone-200:#E4E4E4; --stone-300:#D6D5CE;
  --lime-500:#EAFF00;  --lime-600:#D4E800;
  --lime-200:rgba(234,255,0,.34);

  /* ── Linien ───────────────────────────────────────────────────── */
  --line-soft:rgba(20,20,20,.08);
  --line-mid:rgba(20,20,20,.16);
  --line-strong:rgba(20,20,20,.32);
  --line-dark:rgba(247,246,239,.16);

  /* ── Semantik: hier greifen Komponenten zu, nicht auf die Palette ─ */
  --bg:var(--linen-200);        --bg-alt:var(--linen-300);
  --surface:var(--paper);       --surface-sunken:var(--linen-300);
  --surface-hover:var(--linen-100);
  --text:var(--ink-900);        --text-muted:var(--ink-400);
  --text-faint:var(--ink-300);  --text-on-accent:var(--ink-900);
  --accent:var(--lime-500);     --accent-press:var(--lime-600);
  --accent-wash:var(--lime-200);
  --border:var(--line-mid);     --border-soft:var(--line-soft);
  --border-strong:var(--line-strong);
  --focus-ring:rgba(20,20,20,.9);

  /* Auf Ink-Flaechen */
  --text-on-ink:#F7F6EF;
  --text-muted-on-ink:#A8A79E;
  --text-faint-on-ink:#7F7F77;

  /* ── Schrift (DESIGN.md § 3) ──────────────────────────────────── */
  --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;

  /* ── Rhythmus (DESIGN.md § 4.2/4.3) ───────────────────────────── */
  --wrap-max:1180px;      /* breite Seiten: Landing, Startseite   */
  --wrap-text:780px;      /* Lesespalte: Impressum, Datenschutz   */
  --wrap-pad:40px;
  --wrap-pad-mobil:22px;
  --section-y:clamp(64px,9vw,120px);

  /* ── Geometrie: rechteckig, Radius 0-2px (DESIGN.md § 4.4) ────── */
  --radius:2px;
}

/* Aliase der ersten Fassung. Bestehende Seiten benutzen diese Namen;
   in neuem Markup bitte die semantischen Tokens oben verwenden. */
:root{
  --muted:var(--ink-400);
  --faint:#70706A;
  --muted-dark:var(--text-muted-on-ink);
  --faint-dark:var(--text-faint-on-ink);
  --line:var(--line-mid);
  --lime-pressed:var(--lime-600);
}