/**
 * Bauherrenportal — Zentrale Design-Tokens
 *
 * Quelle der Wahrheit fuer alle Token-Werte. Wird vor allen
 * anderen CSS-Dateien geladen:
 *
 *   <link rel="stylesheet" href="/css/bp-tokens.css?v=1">
 *   <link rel="stylesheet" href="/css/admin.css?v=...">
 *   <link rel="stylesheet" href="/css/bp-components.css?v=...">
 *
 * Aenderungen hier wirken auf admin, portal, forum gleichermassen.
 *
 * Konflikt-Aufloesungen aus docs/design/TOKEN-AUDIT.md:
 *   --bp-nav-h         : 56px gewinnt (admin-Wert, Mobile-Standard)
 *   --bp-text-muted    : #b0b0b0 gewinnt (admin-Wert, Kontrast 9.4:1)
 *   --bp-primary       : neuer Alias (war von Banner-CSS konsumiert)
 *   --bp-primary-dark  : neuer Alias (war von Banner-CSS konsumiert)
 *
 * Light-Mode laeuft im Projekt KLASSEN-BASIERT (body.light-mode),
 * NICHT ueber prefers-color-scheme. Theme-Toggle.js setzt die
 * Klasse explizit. Ein @media (prefers-color-scheme: light) wuerde
 * das Toggle aushebeln.
 */

:root {
  /* === Brand & Akzent === */
  --brand-primary: #e8650a;
  --bp-orange: var(--brand-primary, #e8650a);
  --bp-orange-light: color-mix(in srgb, var(--brand-primary, #e8650a) 80%, #fff);
  --bp-primary: var(--brand-primary, #e8650a);     /* Alias fuer bp-cmp-banner.css */
  --bp-primary-dark: #c54f00;                      /* war Banner-Fallback */

  /* === Spacing (Werte aus admin.css uebernommen, px statt rem
         zur Vermeidung visueller Drift in 113 Views) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* === Radii === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;
  --bp-radius: var(--r-md);  /* legacy alias */

  /* === Font-Sizes === */
  --fs-xs:  .72rem;
  --fs-sm:  .82rem;
  --fs-md:  .9rem;
  --fs-base: 1rem;
  --fs-lg:  1.15rem;
  --fs-xl:  1.35rem;
  --fs-2xl: 1.75rem;

  /* === Status (semantisch, theme-unabhaengig) === */
  --status-ok:        #22c55e;
  --status-info:      #3b82f6;
  --status-warn:      #f59e0b;
  --status-err:       #ef4444;
  --status-neutral:   #9ca3af;

  /* === Severity (DSGVO-/Defect-Kontext) === */
  --sev-low:      #6b7280;
  --sev-medium:   #f59e0b;
  --sev-high:     #ef4444;
  --sev-critical: #dc2626;

  /* === Layout === */
  --bp-nav-h: 56px;             /* einheitlich (war 56 admin vs 64 portal) */
  --bp-bottom-nav-h: 56px;
  --bp-transition: 0.18s ease;

  /* === Touch-Targets (A11y) === */
  --touch-min: 44px;

  /* === Default = Dark-Theme === */
  --bp-bg: #0f0f0f;
  --bp-surface: #1a1a1a;
  --bp-surface-2: #222;
  --bp-border: #2e2e2e;
  --bp-text: #f0f0f0;
  --bp-text-muted: #b0b0b0;     /* Kontrast 9.4:1 auf --bp-bg */

  /* === Shadows (theme-passend, dark) === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
}

/* === Light-Theme — KLASSEN-BASIERT, nicht via prefers-color-scheme ===
 * Greift sobald body irgendeine .light-mode Klasse hat (auch in Kombination
 * mit body.admin-page, body.portal-page, body.forum-page). Wird gesetzt
 * von theme-toggle.js bzw. inline-Scripts in den HTML-Files.
 */
body.light-mode {
  --bp-bg: #f5f5f5;
  --bp-surface: #ffffff;
  --bp-surface-2: #f0f0f0;
  --bp-border: #e0e0e0;
  --bp-text: #1a1a1a;
  --bp-text-muted: #666;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
}

/* === Accessibility: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bp-transition: 0s;
  }
}