/* H4H color tokens — source: tailwind.config.js + ADR-017 + Brand Guide.
   Rule (ADR-017, verbindlich): #2CA0D0 (brand-400) never carries white text
   as a button/badge surface; interactive surfaces use brand-500/600. */
:root {
  /* Primärpalette (Brand Guide Main Colors) */
  --brand-50: #eef8fc; --brand-100: #d6eef8; --brand-200: #b0def0; --brand-300: #7cc7e6;
  --brand-400: #2ca0d0; /* Pantone 2191 C — dominant brand color, surfaces & large type */
  --brand-500: #0b78bd; /* Pantone 3005 C — interaction primary */
  --brand-600: #08749e; /* Pantone 7690 C — hover / depth */
  --brand-700: #075d80; --brand-800: #094d69; --brand-900: #0c4058;
  --h4h-gradient: linear-gradient(135deg, #0b78bd 0%, #2ca0d0 100%); /* @kind color */ /* App-Icon only */
  /* Sekundärpalette (sparsam, nie Primär-UI) */
  --accent-green: #54bca6; /* Pantone 3258 C */
  --accent-warm: #e6ba89;  /* Pantone 3596 C */
  --accent-taupe: #9a8974;
  --accent-cream: #f2e6c4; /* Pantone 7499 C */
  --accent-offwhite: #f5f5f5;
  /* Neutrale (Tailwind gray, wie im Codebase-Buttonsystem) */
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
  --gray-800: #1f2937; --gray-900: #111827;
  /* Semantik */
  --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b; --danger-50: #fef2f2;
  --success-700: #157a63; --success-50: #ecf8f4;   /* AA-dunkles Derivat von accent-green */
  --warning-700: #8a5a1e; --warning-50: #fdf6ec;   /* AA-dunkles Derivat von accent-warm */
  /* Semantische Aliasse */
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-brand: #ffffff;
  --text-link: var(--brand-600);
  --surface-page: #ffffff;
  --surface-subtle: var(--gray-50);
  --surface-card: #ffffff;
  --surface-brand: var(--brand-500);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --focus-ring: var(--brand-500);
}