/* ============================================================
   Koerting Institute — tokens.css
   GENERIERT aus design-tokens.json (Single Source of Truth).
   NICHT von Hand editieren — Änderungen zuerst in der JSON.
   Stand: 2026-07-14 · Regeln & Semantik: DESIGN-PRINCIPLES.md
   ============================================================ */

:root {
  /* ---- Brand (CI – unveränderlich) ---- */
  --lime: #C4D600;
  --lime-bright: #D4E630;
  --lime-dark: #9DA346;
  --pink: #E6007E;
  --pink-bright: #FF2A99;
  --pink-dark: #942F60;
  --gold: #BC9C22;
  --black: #000000;
  --graphite: #191919;
  --white: #FFFFFF;

  /* ---- Dark-Mode Flächen ---- */
  --bg-0: #070707;
  --bg-1: #0E0E0E;
  --bg-2: #141414;
  --bg-3: #191919;
  --bg-4: #232323;

  /* ---- Text auf Dunkel ---- */
  --text-100: #FFFFFF;
  --text-200: rgba(255,255,255,.92);
  --text-300: rgba(255,255,255,.72);
  --text-400: rgba(255,255,255,.55);
  --text-500: rgba(255,255,255,.40);
  --text-600: rgba(255,255,255,.28);

  /* ---- Rahmen ---- */
  --border-subtle: rgba(255,255,255,.06);
  --border-soft: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --border-active: rgba(196,214,0,.40);

  /* ---- Status (UI-Ampel, keine CI-Farben) ---- */
  --status-green: #4ADE80;
  --status-yellow: #FBBF24;
  --status-red: #F87171;

  /* ---- Verläufe ---- */
  --grad-brand: linear-gradient(135deg, var(--lime) 0%, var(--pink) 100%);
  --grad-cta: linear-gradient(90deg,  var(--lime) 0%, var(--pink) 100%);
  --grad-text: linear-gradient(135deg, #FFFFFF 0%, var(--lime) 50%, #FFFFFF 100%);

  /* ---- Spacing-Skala (4er-Basis) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ---- Radius-Skala ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.65), 0 12px 28px -8px rgba(0,0,0,.45);

  /* ---- Glow ---- */
  --glow-lime: 0 0 24px rgba(196,214,0,.40);
  --glow-pink: 0 0 24px rgba(230,0,126,.35);

  /* ---- Typo ---- */
  --font: 'Effra','DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-display: 'Effra','DM Sans','Inter',system-ui,sans-serif;
  --mono: 'JetBrains Mono','Consolas',ui-monospace,monospace;

  /* ---- Font-Size-Skala (diskret) ---- */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  /* ---- Layout ---- */
  --container: 1200px;
  --reading: 900px;
}