/* ─── TOKENS ──────────────────────────────────────────────────
   EINZIGE QUELLE der Design-Werte. Jeder Konsument bindet DIESE Datei
   ein — nie Werte kopieren:

     style.css          → Website (Layout/Komponenten bauen darauf auf)
     kurzprofil-view.html / profile-view.html → PDF-Viewer (gated)
     profil-de.html / profil-en.html → A4-Druckvorlagen der Profil-PDFs
     og-card.html       → Social-Share-Card 1200×630
     Claude Design      → tokens/colors.css (Upload, siehe CLAUDE.md)

   Bewusst eine eigene Datei statt Tokens in style.css: Die Druck- und
   Kartenvorlagen brauchen die Werte, aber NICHT Reset und Layout der
   Website — die würden ihr A4- bzw. 1200×630-Layout zerstören.

   Kontrastregel (WCAG AA): Die hellen Marken-Töne erreichen auf hellem
   Grund nur 1,9–2,8:1. Deshalb:
     Text / Rahmen / Füllungen / Fokusringe  →  --accent-ink(-2)
     Auren, Verläufe, leuchtende Flächen,
     alles über Fotos                        →  --accent-rest/-hover
   Im Dark-Theme mappen die Ink-Töne zurück auf die hellen Originale.
   ───────────────────────────────────────────────────────────── */
:root {
  --c-dark:    #2D3E4F;
  --c-blue:    #77C0F1;
  --c-salmon:  #ff6a68;

  /* Interaktion (Link-/Hover-Konzept): Lachs ruht, Blau reagiert */
  --accent-rest:  var(--c-salmon);
  --accent-hover: var(--c-blue);
  /* Lesbare Akzent-Töne für TEXT/Rahmen/CTA-Füllung (helle Töne sind auf hellem Grund < AA) */
  --accent-ink:   #C2433F;   /* dunkleres Lachs — Text/Rahmen ≥4,5:1, weiß auf Füllung 5:1 */
  --accent-ink-2: #1F6FB0;   /* dunkleres Blau — Text/Rahmen ≥4,5:1 */

  /* Motion — eine Takt-/Easing-Skala für alle Transitions/Animationen.
     Showcase-Timings (Hero-Einblendung, Aura, Bounce) bleiben bewusst eigen. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);  /* Standard: Reveals, Crossfade, Bewegung */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);       /* Verlassen/Ausblenden (beschleunigt) */
  --ease-loop: ease-in-out;                       /* ambiente Endlos-Loops (Aura, Bounce) */
  --dur-fast:  0.2s;                              /* Mikro: Hover, Farbe, Rahmen */
  --dur-mid:   0.35s;                             /* Crossfade, Wisch, Standard-Transition */
  --dur-slow:  0.6s;                              /* Reveals, Header-Einblendung */

  /* Hero-Aura — Light-Mode kräftiger (heller Grund schluckt die Farbe sonst) */
  --aura-1: rgba(255, 106, 104, 0.42);
  --aura-2: rgba(119, 192, 241, 0.40);

  /* Töne auf Navy-Grund (--c-dark). Theme-unabhängig: Navy bleibt Navy,
     egal welches Theme die Seite fährt. Gebraucht von der PDF-Sidebar
     und der Viewer-Leiste — beide standen vorher als kopierte Hex-Werte
     in den Vorlagen. Kontraste auf #2D3E4F nachgerechnet. */
  --navy-text:   #e7edf3;   /* Fließtext auf Navy — 9,3:1 */
  --navy-mute:   #aebccb;   /* gedämpft auf Navy — 5,7:1 */
  --navy-accent: #ff8a86;   /* Lachs-Label auf Navy — 4,8:1 (hellere Aufhellung, da --accent-ink auf Navy zu dunkel wäre) */

  /* light mode */
  --bg:        #F8F8F6;
  --bg-alt:    #EFEFED;
  --text:      #1A1A1A;
  --text-mute: #6B7280;
  --border:    #E0E0DC;
  --nav-bg:    rgba(248, 248, 246, 0.6);
  --bg-input:  #fff;
}

[data-theme="dark"] {
  --bg:        #1C2530;
  /* Dark: helle Marken-Töne sind auf dunklem Grund bereits AA → Ink = hell */
  --accent-ink:   var(--c-salmon);
  --accent-ink-2: var(--c-blue);
  --aura-1: rgba(255, 106, 104, 0.22);
  --aura-2: rgba(119, 192, 241, 0.22);
  --bg-alt:    #243040;
  --text:      #F0F0EE;
  --text-mute: #9CA3AF;
  --border:    #2D3E4F;
  --nav-bg:    rgba(28, 37, 48, 0.6);
  --bg-input:  var(--bg);
}