/*
  Globale Design-Tokens für alle Tools unter /tools/.
  Ablage: /tools/tokens.css
  Einbindung: MUSS in jedem Tool VOR shared.css geladen werden.

    <link rel="stylesheet" href="../tokens.css">
    <link rel="stylesheet" href="../shared.css">
    <link rel="stylesheet" href="style.css">

  Hier änderst du Farben, Schriftart, Schriftgrößen, Rundungen,
  Abstände und Übergänge zentral für ALLE Tools auf einmal.

  Was NICHT hierher gehört: Farben/Werte, die nur ein einzelnes Tool
  betreffen (z. B. Helden-Grün, AC-Blau, Ini-Gold, Klaviatur-Farben).
  Die bleiben im jeweiligen Tool-eigenen style.css.
*/

:root{
  /* ---------- Farben ---------- */
  --bg: #14161b;
  --surface: #1c1f26;
  --surface-2: #22262f;
  --border: #2c303a;
  --text: #e8e6df;
  --text-muted: #8b8f99;

  --accent:   #4caf6d;
  --accent-hover:   #5ec483;
  --accent-text: #10231a;

  --danger: #b34747;
  --danger-hover: #c65a5a;

  /* ---------- Schriftart ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* ---------- Schriftgrößen-Skala ---------- */
  --fs-xs: 0.75rem;   /* Status-Texte, Fußzeile, kleine Hinweise */
  --fs-sm: 0.88rem;   /* Buttons */
  --fs-md: 0.9rem;    /* Eingabefelder, Fließtext, Leerzustand */
  --fs-xl: 1.3rem;    /* Haupttitel (h1) */

  /* ---------- Rundungen ---------- */
  --radius-sm:   6px;    /* Buttons, Inputs, kleine Aktionen */
  --radius-md: 8px;    /* Karten, Zeilen, Leerzustand */
  --radius-lg: 10px;   /* große Karten (z. B. Tool-Übersicht) */
  --radius-pill: 999px;/* volle Rundung (Toggles, Chips, Balken) */

  /* ---------- Abstände ---------- */
  --space-sm: 10px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 30px;

  /* ---------- Übergänge ---------- */
  --transition-fast: 0.12s ease;
  --transition-med: 0.14s ease;
}