/* ==========================================================================
   Metron Design-Tokens – helles, reduziertes Theme
   Quelle: Claude-Wissen/Design - Fitness-Volumen-Planer/DESIGN.md
   Schwarz ist die Primärfarbe, Grün = gut/erledigt, Blau nur für Fokus/Links.
   ========================================================================== */
/* Geist (SIL Open Font License), selbst gehostet – kein Abruf bei Drittanbietern */
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Flächen */
  --bg: #f4f4f5;
  --panel: #ffffff;
  --panel-2: #fafafa;
  --panel-3: #f0f0f1;
  --border: rgba(26, 28, 33, .1);
  --border-soft: rgba(26, 28, 33, .06);
  --border-hover: rgba(26, 28, 33, .25);

  /* Text */
  --text: #1a1c21;
  --text-2: #505655;
  --muted: #66716f;
  --placeholder: #9a9fa6;

  /* Aktion & Status */
  --primary: #1a1c21;
  --primary-hover: #2c2f36;
  --accent: #4469fc;
  --accent-ink: #3556d8;
  --accent-soft: #e9eeff;
  --success: #2f9e6e;
  --success-ink: #1f6b4a;
  --success-soft: #e4f4ec;
  --danger: #d9342b;
  --danger-soft: #fdecea;
  --warn: #b96a0f;
  --warn-text: #7a4b06;
  --warn-soft: #fff6e5;
  --warn-border: #f1d9a6;

  /* Datenfarben (Diagramme, Makros, Mahlzeiten) */
  --chart-1: #1a1c21;
  --chart-2: #4469fc;
  --chart-3: #2f9e6e;
  --chart-4: #e8962e;
  --chart-5: #d9475a;
  --c-protein: #2f9e6e;
  --c-carbs: #4469fc;
  --c-fat: #e8962e;
  --c-kcal: #1a1c21;
  --c-water: #38a3d6;
  --c-meal-breakfast: #e8962e;
  --c-meal-lunch: #2f9e6e;
  --c-meal-dinner: #4469fc;
  --c-meal-snack: #a3a6ad;

  /* Form & Bewegung */
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Alte Variablennamen (JS-Module nutzen sie in Inline-Styles) */
  --fg: var(--text);
  --green: var(--success);
  --red: var(--danger);
  --yellow: var(--warn);
  --accent-2: var(--c-fat);
  --border-strong: rgba(26, 28, 33, .18);
}