/* ============================================
   VERKEHRSMENTOR — Farbwelt
   Quelle: Markenkonzept "11 · ERSCHEINUNGSBILD"
   Violett #951B81 · Cyan #77CBEA · Navy #0F1B2D
   Light #D7EAF2 · Dark #1D1D1B
   ============================================ */
:root {
  /* Basis — Markenfarben */
  --vm-violet: #951B81;
  --vm-cyan: #77CBEA;
  --vm-navy: #0F1B2D;
  --vm-light: #D7EAF2;
  --vm-dark: #1D1D1B;
  --vm-white: #FFFFFF;

  /* Offizielle Aliase aus design-tokens.css (CI-Handbuch v1.0) */
  --vf-violet: #951B81;
  --vf-cyan: #77CBEA;
  --vf-navy: #0F1B2D;
  --vf-dark: #1D1D1B;
  --vf-lightblue: #D7EAF2;
  --vf-white: #FFFFFF;
  --vf-gradient: linear-gradient(135deg, var(--vf-violet), var(--vf-cyan));

  /* Abgeleitete Töne (oklch-harmonisch zur Basis) */
  --vm-violet-deep: #6E1360;
  --vm-violet-soft: #F4E4F0;
  --vm-cyan-deep: #3D9FC9;
  --vf-cyan-deep: #3D9FC9;
  --vm-cyan-soft: #EAF6FC;
  --vm-navy-800: #16263D;
  --vm-navy-700: #1F3350;

  /* Neutrale Skala (navy-getönt) */
  --vm-gray-050: #F5F9FB;
  --vm-gray-100: #E8EFF4;
  --vm-gray-200: #D3DEE6;
  --vm-gray-300: #B0BFCB;
  --vm-gray-400: #8496A7;
  --vm-gray-500: #5E7182;
  --vm-gray-600: #435363;
  --vm-gray-700: #2E3D4E;

  /* Semantische Aliase — Oberflächen */
  --surface-page: var(--vm-white);
  --surface-subtle: var(--vm-gray-050);
  --surface-card: var(--vm-white);
  --surface-inverse: var(--vm-navy);
  --surface-inverse-raised: var(--vm-navy-800);
  --surface-accent-tint: var(--vm-cyan-soft);

  /* Semantische Aliase — Text */
  --text-body: var(--vm-dark);
  --text-heading: var(--vm-navy);
  --text-muted: var(--vm-gray-500);
  --text-inverse: var(--vm-light);
  --text-inverse-strong: var(--vm-white);
  --text-accent: var(--vm-violet);
  --text-kicker: var(--vm-cyan-deep);

  /* Semantische Aliase — Akzente & Aktionen */
  --accent-primary: var(--vm-violet);
  --accent-primary-hover: var(--vm-violet-deep);
  --accent-secondary: var(--vm-cyan);
  --accent-check: var(--vm-cyan-deep);

  /* Status (pragmatische Ergänzung — nicht im Markenkonzept definiert) */
  --status-success: #1E8A5E;
  --status-warning: #B87A0E;
  --status-danger: #B3323C;

  /* Linien */
  --border-subtle: var(--vm-gray-200);
  --border-strong: var(--vm-gray-300);
  --border-inverse: rgba(215, 234, 242, 0.18);
}