/*
 * Achtung: CSS-Variablen d??rfen sich nicht gegenseitig referenzieren.
 * In v2.0.32 gab es hier eine zyklische Definition (blau/text/border),
 * wodurch Browser die Variablen als "invalid" behandeln und dann viele
 * Farben auf Default/Schwarz fallen.
 *
 * Darum sind die Design-Tokens hier als echte Werte definiert.
 */
/* SECTION: TOKENS / VARIABLES */
:root{
  /* Blau-Abstufungen (reduziert, rollenbasiert) */
  --ss-blue-deep: #356D9F;      /* Primary Blau */
  --ss-blue-muted: #A0BAD2;     /* dezent/disabled */
  --ss-blue-pale: #D7E8FF;      /* gro??e Fl??chen */
  --ss-blue-verylight: #EEF5FF; /* Buttons/Highlights */

  /* Kreisfarben */
  --ss-blue: var(--ss-blue-deep);
  --ss-blue-light: var(--ss-blue-verylight);

  --ss-red: #E63946;
  --ss-red-light: #FBE7E9;

  --ss-yellow: #F4A261;
  --ss-yellow-light: #FFF2E5;

  --ss-green: #2A9D8F;
  --ss-green-light: #E5F5F1;

  /* Neutrals / UI roles */
  --ss-text: #222222;
  --ss-text-muted: #555555;
  --ss-border: #CBD5E1; /* ehemals --ss-slate-200 */
  --ss-surface: #F4F7FB;
  --ss-surface-2: #F8F9FA;
  --ss-surface-3: #F0F0F0;

  /* Graut??ne (Legacy/Bestand: wird schrittweise auf Rollenvariablen umgestellt) */
  --ss-gray-600: #666666;
  --ss-gray-700: #888888;
  --ss-gray-800: #999999;
  --ss-gray-850: #AAAAAA;
  --ss-gray-300: #CCCCCC;
  --ss-gray-200: #DDDDDD;
  --ss-gray-150: #E0E0E0;
  --ss-gray-140: #E5E5E5;
  --ss-gray-130: #E8E8E8;
  --ss-gray-120: #ECECEC;
  --ss-gray-110: #F0F0F0;
  --ss-gray-105: #F8F9FA;
  --ss-gray-104: #F9F9F9;
  --ss-gray-103: #FAFAFA;

  /* Legacy Aliases (f??r vorhandene Regeln, werden schrittweise ersetzt) */
  --ss-white: var(--ss-surface);

  /* Defaults f??r Akzent (wird je Kategorie ??berschrieben) */
  --accent-color: var(--ss-blue);
  --accent-light: var(--ss-blue-light);
}