/* AEAL Brand Tokens v1 — AUTOGENERIERT aus design/tokens.json (npm run tokens:build).
 * Konsum: <link rel="stylesheet" href="/brand/v1/tokens.css">
 * Regeln: brand-500 = Flaeche/Grafik/Hero · brand-700 = Text/Links/<18px auf hellem Grund.
 * serif = DISPLAY ONLY (>=16px) · numeric = NUR Zahlentabellen im Report. */
:root{
  --brand-50: #F9F1EE;
  --brand-100: #F2E1D9;
  --brand-200: #E7C5B6;
  --brand-300: #DCAA93;
  --brand-400: #CA9177;
  --brand-500: #B8785C;
  --brand-600: #B16A4A;
  --brand-700: #AB5C38;
  --brand-800: #7A4C3B;
  --brand-900: #5E3828;
  --brand-500-rgb: 184,120,92;
  --brand-700-rgb: 171,92,56;
  --calm-rgb: 122,158,126;

  --neutral-100: #D9D2CA;
  --neutral-300: #9A8F85;
  --neutral-400: #7C7066;
  --neutral-500: #6F685F;
  --neutral-600: #5C5550;
  --neutral-700: #4A4239;
  --neutral-800: #3A352F;
  --neutral-900: #2D2A26;

  --surface-base: #FAF8F4;
  --surface-card: #FFFFFF;
  --surface-warm: #F4F0EA;
  --surface-line: #DDD5C8;
  --surface-line-soft: #E7E0D6;
  --surface-accent: #B8785C;
  --surface-accent-soft: #F2E1D9;
  --surface-calm: #7A9E7E;
  --surface-calm-soft: #EBF0E8;
  --text-primary: #2D2A26;
  --text-secondary: #5C5550;
  --text-muted: #7C7066;
  --text-deco: #9A8F85;
  --link: #AB5C38;
  --status-optimal: #597A5C;
  --status-grenzwertig: #956A2D;
  --status-auffaellig: #AB5C38;
  --status-optimal-bg: #EBF0E8;
  --status-grenzwertig-bg: #F7EBD6;
  --status-auffaellig-bg: #F2E1D9;
  --surface-calm-deep: #2D3B2E;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Outfit', -apple-system, sans-serif;
  --font-numeric: 'Inter', 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.18em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-ambient: 2400ms;
  --easing-standard: ease;
  --easing-emphasis: ease-in-out;
  --easing-exit: ease-in;
  --z-base: 0;
  --z-raised: 2;
  --z-nav: 100;
  --z-overlay: 1000;
}

/* reduced-motion-Wrapper (Pflicht): alle Token-Dauern -> 0, laufende Animationen gestoppt. */
@media (prefers-reduced-motion: reduce){
  :root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-ambient:0ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}