/* ==========================================================================
   TRAINDROPS · Design Tokens v1.1 · Konzept C „Neon Nacht“
   Hell ist der Standard (Web, App, Kartei, Druck). Nacht ist eine Variante
   (Instagram, Smartboard, Hero-Flächen): <body data-theme="night">.
   Einzige Quelle für Farben, Schrift, Abstände. Keine Werte im Code duplizieren.
   Alle Kontrastwerte sind gerechnet (WCAG 2.1).
   ========================================================================== */

/* Schriften: SELBST HOSTEN (DSGVO), nicht von fonts.googleapis.com laden.
   Empfehlung: npm i @fontsource-variable/bricolage-grotesque @fontsource-variable/figtree
   (Paketnamen beim Installieren prüfen). */

:root {
  /* ---- Marke: Tinte (ersetzt Schwarz) ---- */
  --td-navy:         #0F1A3A;  /* Haupttext, Primärbutton, Konturen (15,8:1 auf Licht) */

  /* ---- Hell (Standard) ---- */
  --td-bg:           #F4F6FF;  /* Seiten-/App-Hintergrund */
  --td-surface:      #FFFFFF;  /* Karten, Kartei-Papier */
  --td-text:         #0F1A3A;
  --td-text-muted:   #4A5578;  /* 6,8:1 auf Licht */
  --td-line:         #C9D0EA;  /* nur Dekor-Trennlinien, trägt keine Information */
  --td-outline:      #0F1A3A;  /* Rand bei Komponenten, die sich von weiß abheben müssen */

  /* ---- Kategorie-Farben: FLÄCHE (Bildschirm) ----
     Auf diesen Flächen steht NUR --td-navy als Schrift (5,2 bis 11,7:1).
     Weiße Schrift ist verboten (1,3 bis 3,3:1). */
  --td-ausdauer:         #F74A92;
  --td-kraft:            #38B0FD;
  --td-schnelligkeit:    #F7D332;
  --td-koordination:     #1FF08F;

  /* ---- Kategorie-Farben: TEXT/ICON auf hellem Grund (>= 4,6:1 auf Licht und Weiß) ---- */
  --td-ausdauer-deep:        #AE3270;
  --td-kraft-deep:           #1F6598;
  --td-schnelligkeit-deep:   #0F1A3A;  /* Gelb ist nie Textfarbe auf hell: Navy-Text mit gelbem Punkt */
  --td-koordination-deep:    #14705A;

  /* ---- Kategorie-Farben: zarte Flächen (Navy-Text >= 13:1) ---- */
  --td-ausdauer-tint:        #FEDEEB;
  --td-kraft-tint:           #DBF1FF;
  --td-schnelligkeit-tint:   #FEF7DA;
  --td-koordination-tint:    #D7FCEB;

  --td-focus: #0F1A3A;

  /* ---- Alias-Namen für bestehende Komponenten (v1.0) ---- */
  --td-paper:   var(--td-bg);
  --td-ink:     var(--td-text);
  --td-ink-muted: var(--td-text-muted);
  --td-header:  var(--td-navy);

  /* ---- Typografie ---- */
  --td-font-display: "Sora Variable", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Verläufe (v2, nur Bildschirm; im Druck flächig bleiben) ---- */
  --td-g-ausdauer:      linear-gradient(145deg,#FF8EC0 0%,#F74A92 52%,#D12F7C 100%);
  --td-g-kraft:         linear-gradient(145deg,#8AD8FF 0%,#38B0FD 52%,#1F8BDB 100%);
  --td-g-schnelligkeit: linear-gradient(145deg,#FFE97A 0%,#F7D332 52%,#E5B91A 100%);
  --td-g-koordination:  linear-gradient(145deg,#8CFFC8 0%,#1FF08F 52%,#10C975 100%);
  --td-font-body:    "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --td-fs-xs:   0.8125rem;
  --td-fs-sm:   0.9375rem;
  --td-fs-base: 1.0625rem;
  --td-fs-lg:   1.25rem;
  --td-fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --td-fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --td-fs-hero: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);

  --td-lh-tight: 1.05;
  --td-lh-snug:  1.3;
  --td-lh-body:  1.6;

  /* ---- Abstände (4er-Raster) ---- */
  --td-space-1: 0.25rem;
  --td-space-2: 0.5rem;
  --td-space-3: 0.75rem;
  --td-space-4: 1rem;
  --td-space-5: 1.5rem;
  --td-space-6: 2rem;
  --td-space-7: 3rem;
  --td-space-8: 4.5rem;
  --td-space-9: 7rem;

  /* ---- Form ---- */
  --td-radius-sm:  10px;
  --td-radius-md:  16px;
  --td-radius-lg:  24px;
  --td-radius-pill: 999px;

  --td-shadow-card: 0 1px 0 rgba(15,26,58,.05), 0 10px 26px -14px rgba(15,26,58,.35);
  --td-shadow-lift: 0 2px 0 rgba(15,26,58,.06), 0 18px 38px -16px rgba(15,26,58,.45);

  --td-container: 72rem;
  --td-container-narrow: 44rem;

  --td-ease: cubic-bezier(.2,.7,.2,1);
  --td-dur: 180ms;
}

/* ==========================================================================
   NACHT-VARIANTE (Instagram, Smartboard, Hero). Neon-Farben leuchten hier.
   Regel: Pink als TEXT nur auf --td-bg (5,2:1), nicht auf --td-surface (4,4:1).
   ========================================================================== */
[data-theme="night"] {
  --td-bg:           #0F1A3A;
  --td-surface:      #18264F;
  --td-text:         #F4F6FF;
  --td-text-muted:   #A9B3D6;  /* 8,2:1 auf Nacht, 7,1:1 auf Karte */
  --td-line:         #27345F;
  --td-outline:      #27345F;
  --td-focus:        #F7D332;

  --td-shadow-card: 0 0 0 1px #27345F;
  --td-shadow-lift: 0 14px 34px -14px rgba(247,74,146,.55);

  /* Text-Farben auf Nacht: die Neon-Flächenfarben selbst */
  --td-ausdauer-deep:        var(--td-ausdauer);
  --td-kraft-deep:           var(--td-kraft);
  --td-schnelligkeit-deep:   var(--td-schnelligkeit);
  --td-koordination-deep:    var(--td-koordination);

  --td-ausdauer-tint:        #2B1840;  /* Pink darauf 4,9:1 */
  --td-kraft-tint:           #16335F;  /* Blau darauf 5,3:1 */
  --td-schnelligkeit-tint:   #3A3520;  /* Gelb darauf 8,4:1 */
  --td-koordination-tint:    #11403F;  /* Grün darauf 7,6:1 */
}

/* ==========================================================================
   DRUCK-SET (Kartei-PDF, Browser-Druck). CMYK kann Neon-Mint und Neon-Blau nicht
   darstellen (gerechnete Schätzung: Mint würde zu Salbeigrün #8BC79B). Deshalb
   zwei gamut-sichere Ersatzwerte. Pink, Gelb und Navy bleiben gleich.
   Klasse .td-print wird beim PDF-Export gesetzt, @media print greift automatisch.
   ========================================================================== */
.td-print, .td-print [data-theme] {
  --td-kraft:         #5EBEF0;
  --td-koordination:  #7FB833;
  --td-kraft-tint:    #E3F3FC;
  --td-koordination-tint: #EAF3D9;
  --td-kraft-deep:    #1F6598;
  --td-koordination-deep: #4C7A10;
}
@media print {
  :root {
    --td-kraft:         #5EBEF0;
    --td-koordination:  #7FB833;
    --td-kraft-tint:    #E3F3FC;
    --td-koordination-tint: #EAF3D9;
    --td-koordination-deep: #4C7A10;
    --td-bg: #FFFFFF;
    --td-shadow-card: none;
  }
}

/* Kategorie-Hilfsklassen: setzen drei Variablen, Komponenten lesen nur diese */
.td-cat-ausdauer      { --g: var(--td-g-ausdauer); --cat: var(--td-ausdauer);      --cat-deep: var(--td-ausdauer-deep);      --cat-tint: var(--td-ausdauer-tint); }
.td-cat-kraft         { --g: var(--td-g-kraft); --cat: var(--td-kraft);         --cat-deep: var(--td-kraft-deep);         --cat-tint: var(--td-kraft-tint); }
.td-cat-schnelligkeit { --g: var(--td-g-schnelligkeit); --cat: var(--td-schnelligkeit); --cat-deep: var(--td-schnelligkeit-deep); --cat-tint: var(--td-schnelligkeit-tint); }
.td-cat-koordination  { --g: var(--td-g-koordination); --cat: var(--td-koordination);  --cat-deep: var(--td-koordination-deep);  --cat-tint: var(--td-koordination-tint); }

/* Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  :root { --td-dur: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}