/*
 * Design-Tokens — Grafikarchiv (Phase 2, Querschnitt Design-System)
 * ------------------------------------------------------------------
 * Einzige Quelle der Wahrheit fuer Farben, Schriften, Abstaende, Radien.
 * Rein additiv: definiert NUR CSS-Variablen unter :root — veraendert fuer sich
 * genommen KEIN Aussehen, bis eine Klasse/ein Template die Variablen referenziert.
 * Werte sind aus dem heutigen Ist-Zustand abgeleitet (base.html, widgetbuilder/base.html,
 * Inline-Styles) und treffen das aktuelle Look-and-Feel.
 *
 * Konvention: alle Tokens mit Praefix --ds-  (design system).
 * Doku/Katalog: /styleguide/  ·  Regeln: docs/architecture.md §4(6).
 */

:root {
  /* --- Akzent (RND-Blau) --- */
  --ds-color-accent: #4f80ff;
  --ds-color-accent-hover: #3a6cd9;   /* dunkleres Blau: Hover/aktiv */
  --ds-color-accent-tint: #e6eeff;    /* helle Akzentflaeche */
  /* Begleiter fuer rgba(): rgba(var(--ds-color-accent-rgb), <alpha>).
     Wert MUSS == --ds-color-accent bleiben (beide bei Farbwechsel anpassen). */
  --ds-color-accent-rgb: 79, 128, 255;
  --ds-color-accent-border: rgba(var(--ds-color-accent-rgb), 0.25);

  /* --- Hintergruende --- */
  --ds-bg-page: #f2f2f2;
  --ds-bg-surface: #ffffff;
  --ds-bg-muted: #f5f5f5;
  --ds-bg-accent-subtle: #f8f9ff;     /* sehr helle Blau-Flaeche: Zeilen-/Options-Hover */

  /* --- Text --- */
  --ds-text: #333333;
  --ds-text-secondary: #666666;
  --ds-text-muted: #999999;

  /* --- Rahmen / Trenner --- */
  --ds-border: #e0e0e0;
  --ds-border-strong: #dddddd;

  /* --- Status (kanonische Palette fuer Banner + Messages, ADR-0016) --- */
  /* EINE Familie je Typ: -bg, -text, -border, -icon (kraeftiger Akzent), -btn-hover
     (Hover-Flaeche des Close-Buttons). Werte = die vormalige --ds-msg-*-Palette der
     .system-message-* (ADR-0014, abgeloest durch 0016). -btn-hover haelt das exakte
     rgba()-Literal (kein -rgb-Triple), damit Hover-States byte-identisch bleiben. */
  --ds-success-bg: #dcfce7;
  --ds-success-text: #166534;
  --ds-success-border: #86efac;
  --ds-success-icon: #16a34a;
  --ds-success-btn-hover: rgba(22, 101, 52, 0.1);

  --ds-info-bg: #e6f3ff;
  --ds-info-text: #1e3a8a;
  --ds-info-border: #91c9ff;
  --ds-info-icon: #3b82f6;
  --ds-info-btn-hover: rgba(30, 58, 138, 0.1);

  --ds-warning-bg: #fff3cd;
  --ds-warning-text: #856404;
  --ds-warning-border: #f6e05e;
  --ds-warning-icon: #d69e2e;
  --ds-warning-btn-hover: rgba(133, 100, 4, 0.1);

  --ds-error-bg: #fee2e2;
  --ds-error-text: #991b1b;
  --ds-error-border: #fca5a5;
  --ds-error-icon: #dc2626;
  --ds-error-btn-hover: rgba(153, 27, 27, 0.1);

  /* --- Flags (Grafik-Status-Kennzeichnung; Werte aus .flag.* in archive) --- */
  --ds-flag-regional: #ff4444;
  --ds-flag-evergreen: #44bb55;
  --ds-flag-patch: #a044ff;

  /* --- Schriften (aus assets.rndtech.de, in base.html als @font-face geladen) --- */
  --ds-font-heading: 'DINNextLTPro', sans-serif;
  --ds-font-body: 'InterRegular', sans-serif;
  --ds-font-serif: 'Source Serif Pro', serif;

  /* --- Radien --- */
  --ds-radius-sm: 4px;
  --ds-radius: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 20px;

  /* --- Abstaende (Skala 4/8/12/16/20/24) --- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;

  /* --- Schatten --- */
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --ds-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}