/* ===========================================================================
   Good Ads Copilot — gemeinsame Design-Tokens (EINE Quelle für Website und App)
   ---------------------------------------------------------------------------
   Quelle: static/tokens.css. Der Website-Build kopiert die Datei unverändert nach
   website/assets/css/tokens.css (site_build/build.py: sync_tokens_css). Die App
   (static/index.html) bindet dieselbe Datei ein und leitet ihre Alias-Namen per var()
   davon ab — nie mit eigenen Farbwerten.
   Eine Akzentfarbe (#5170ff; Flächen mit weißer Schrift #3d58e0 für AA),
   kühle Neutrale, 1-px-Linien, mehrlagige subtile Schatten, Motion 150–300 ms.
   =========================================================================== */
:root{
  color-scheme:light;
  /* Neutral (kühles Grau) */
  --n0:#ffffff; --n25:#fbfbfd; --n50:#f6f7f9; --n100:#eef0f4; --n200:#e3e6ec; --n300:#cdd2db;
  --n400:#9aa2b1; --n500:#667085; --n600:#4b5363; --n700:#363d4a; --n800:#222733; --n900:#12161f; --n950:#0a0d14;
  /* Marke */
  --b50:#f2f4ff; --b100:#e4e9ff; --b200:#c9d2ff; --b300:#a3b2ff; --b400:#7189ff; --b500:#5170ff; --b600:#3d58e0; --b700:#3147c2; --b800:#27389a;
  /* Funktional (nur in UI-Nachbauten) */
  --ok:#157f3d; --ok-bg:#e8f6ee; --ok-dot:#22a55a;
  --warn:#9a5b06; --warn-bg:#fdf3dc; --warn-dot:#e5a50a;
  --bad:#b4231a; --bad-bg:#fdecea; --bad-dot:#e5484d;
  /* Semantik */
  --bg:var(--n0); --bg-soft:var(--n25); --bg-sub:var(--n50);
  --ink:var(--n950); --txt:var(--n700); --muted:var(--n500); --faint:var(--n400);
  --line:rgba(10,13,20,.08); --line-2:rgba(10,13,20,.13); --line-3:rgba(10,13,20,.2);
  --brand:var(--b500); --brand-ink:var(--b600); --brand-soft:var(--b50);
  --ring:0 0 0 3px rgba(81,112,255,.32);
  /* Radien */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  /* Schatten (mehrlagig, subtil) */
  --sh-1:0 1px 1px rgba(10,13,20,.04),0 1px 3px rgba(10,13,20,.06);
  --sh-2:0 0 0 1px rgba(10,13,20,.05),0 1px 2px rgba(10,13,20,.04),0 6px 16px -4px rgba(10,13,20,.08);
  --sh-3:0 0 0 1px rgba(10,13,20,.06),0 2px 4px rgba(10,13,20,.04),0 16px 40px -12px rgba(10,13,20,.16);
  --sh-win:0 0 0 1px rgba(10,13,20,.07),0 2px 6px rgba(10,13,20,.04),0 30px 60px -20px rgba(10,13,20,.22),0 60px 120px -40px rgba(49,71,194,.28);
  /* Typo-Skala */
  --fs-display:clamp(34px,6.4vw,76px); --fs-h1:clamp(36px,4.8vw,56px); --fs-h2:clamp(30px,3.7vw,46px);
  --fs-h3:clamp(18px,1.6vw,20px); --fs-lead:clamp(17px,1.5vw,20px); --fs-body:16.5px; --fs-sm:14.5px; --fs-xs:13px; --fs-2xs:12px;
  /* Raster & Rhythmus */
  --maxw:1200px; --gut:clamp(20px,4vw,32px); --sec:clamp(80px,10vw,136px); --gap:clamp(16px,2vw,24px);
  --head-h:64px;
  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:150ms; --t:220ms; --t-slow:300ms;
}