/*
 * 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;

  /* --- Neutrale Grau-Skala (ADR-0021) ---------------------------------------
     WERT-EXAKT aus dem Bestand abgeleitet (1:1), NICHT konsolidiert: jeder hier
     stehende Wert kam im Bestands-CSS mindestens dreimal vor. Zweck ist, die
     vielen Grau-Literale ohne jede optische Aenderung benennbar zu machen; die
     Skala ist deshalb absichtlich ungleichmaessig. Eine spaetere Zusammenlegung
     nah beieinanderliegender Stufen ist eine SICHTBARE Aenderung und braucht
     einen eigenen Schritt + Freigabe.
     Bereits durch ROLLEN-Tokens abgedeckt und hier bewusst NICHT doppelt
     definiert: #ffffff (--ds-bg-surface), #f5f5f5 (--ds-bg-muted),
     #f2f2f2 (--ds-bg-page), #e0e0e0 (--ds-border), #dddddd (--ds-border-strong),
     #333333 (--ds-text), #666666 (--ds-text-secondary), #999999 (--ds-text-muted).
     Rollen-Token schlaegt Skalen-Token: wo eine Farbe Text/Rahmen/Flaeche im
     Sinne der Rolle ist, das Rollen-Token nehmen (Muster ADR-0012). */
  --ds-gray-50: #f9f9f9;
  --ds-gray-75: #f8f8f8;
  --ds-gray-100: #f3f3f3;
  --ds-gray-150: #f0f0f0;
  --ds-gray-200: #eeeeee;
  --ds-gray-250: #eaeaea;
  --ds-gray-300: #e8e8e8;
  --ds-gray-400: #cccccc;
  --ds-gray-500: #aaaaaa;
  --ds-gray-700: #555555;
  --ds-gray-800: #444444;
  --ds-gray-900: #222222;

  /* --- Sehr helle Flaechen-Tints (ADR-0021, ebenfalls 1:1 aus dem Bestand) ---
     Reihenfolge = zunehmende Faerbung. #f8f9ff hat schon ein Rollen-Token
     (--ds-bg-accent-subtle) und fehlt hier deshalb bewusst. */
  --ds-tint-neutral: #f8f9fa;    /* neutraler Hauch (Karten-/Tabellenflaechen) */
  --ds-tint-accent-100: #f5f8ff; /* heller Blau-Hauch */
  --ds-tint-accent-200: #f3f7ff; /* etwas kraeftigerer Blau-Hauch */

  /* --- 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);
}