/* ==========================================================================
   Design Tokens – Studio Sohns (v1)
   ==========================================================================
   Zentrale Datei fuer alle CSS Custom Properties (Design Tokens).
   Single Source of Truth — Aenderungen an Tokens nur hier vornehmen.

   Theme-System:
   - :root                     = Dark Mode (digitaler Standard)
   - [data-theme="light"]      = Light Mode
   - .doc-theme                = Dokumenten-/Print-Modus
   - @media print              = Druckspezifische Anpassungen

   Referenz: docs/ci/BRANDBOOK_STUDIO_SOHNS_v1.md
   Migration: docs/ci/CODE_MIGRATION_NOTES.md
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Farben – Hintergruende
     -------------------------------------------------------------------------- */
  --bg: #0d1117;
  --bg-elevated: #1c2129;
  --surface: #161b22;
  --border: #21262d;
  --border-hover: rgba(0, 200, 240, 0.35);

  /* --------------------------------------------------------------------------
     Farben – Akzent
     -------------------------------------------------------------------------- */
  --accent: #00c8f0;
  --accent-hover: #00aed4;
  --accent-dim: rgba(0, 200, 240, 0.08);
  --accent-border: rgba(0, 200, 240, 0.25);
  --accent-glow: rgba(0, 200, 240, 0.12);

  /* --------------------------------------------------------------------------
     Farben – Text
     -------------------------------------------------------------------------- */
  --text: #e6edf4;
  --muted: #7d8590; /* WCAG AA 5.1:1 auf --bg — #6e757e war falsch (echte Ratio 4.06:1, nicht bestanden) */

  /* --------------------------------------------------------------------------
     Farben – Status
     -------------------------------------------------------------------------- */
  --green: #3fb950;
  --green-subtle: rgba(63, 185, 80, 0.15);
  --error: #f85149;

  /* --------------------------------------------------------------------------
     Typografie – Schriftfamilien
     -------------------------------------------------------------------------- */
  --font-head: 'Syne', 'Segoe UI', system-ui, sans-serif;
  --font-wordmark: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  /* --------------------------------------------------------------------------
     Typografie – Schriftgroessen
     -------------------------------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-hero: min(9vw, 100px);

  /* --------------------------------------------------------------------------
     Typografie – Zeilenhoehen
     -------------------------------------------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.75;

  /* --------------------------------------------------------------------------
     Spacing – 4px Basis-System
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Sektions-Abstaende */
  --section-pad: 112px;
  --section-pad-mobile: 64px;
  --section-gap: var(--space-32);
  --section-gap-sm: var(--space-24);

  /* --------------------------------------------------------------------------
     Container
     -------------------------------------------------------------------------- */
  --container-narrow: 780px;
  --container-max: 1320px;
  --container-wide: 1440px;
  --container-pad: 48px;
  --container-pad-mobile: 20px;

  /* --------------------------------------------------------------------------
     Radii
     -------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-card: 0 24px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.2);
  --shadow-subtle: 0 4px 16px rgba(0,0,0,0.15);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* --------------------------------------------------------------------------
     Z-Index
     -------------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
}

/* ==========================================================================
   Light / Dokument / Print Modus
   ==========================================================================
   Semantisch gleiche Token-Namen, andere Werte.
   Aktivierung via:
   - data-theme="light" auf <html> oder einem Container
   - .doc-theme Klasse auf einem Container
   - @media print (automatisch fuer Druckausgabe)
   ========================================================================== */

[data-theme="light"],
.doc-theme {
  --bg: #ffffff;
  --bg-elevated: #f8fafc;
  --surface: #f8fafc;
  --border: #e2e8f0;
  --border-hover: rgba(0, 148, 179, 0.35);

  --accent: #0094b3;
  --accent-hover: #007a94;
  --accent-dim: rgba(0, 148, 179, 0.06);
  --accent-border: rgba(0, 148, 179, 0.22);
  --accent-glow: rgba(0, 148, 179, 0.08);

  --text: #0f172a;
  --muted: #475569;

  --green: #16a34a;
  --error: #dc2626;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 4px 20px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04);
}

/* Dokument-spezifische Erweiterungen (nur fuer .doc-theme) */
.doc-theme {
  --border-sub: #f1f5f9;
  --surface-2: #f1f5f9;

  /* Severity-Farben (Audit-/Angebotskontext) */
  --severity-crit: #dc2626;
  --severity-crit-bg: #fef2f2;
  --severity-high: #d97706;
  --severity-high-bg: #fffbeb;
  --severity-med: #2563eb;
  --severity-med-bg: #eff6ff;
  --severity-low: #6b7280;
  --severity-low-bg: #f9fafb;
}

@media print {
  :root {
    --bg: #ffffff;
    --surface: #f8fafc;
    --border: #e2e8f0;
    --accent: #0094b3;
    --text: #0f172a;
    --muted: #475569;
  }
}

/* ==========================================================================
   Barrierefreiheit – Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}