/* ════════════════════════════════════════════════════
   tokens.css — Trainer DB
   Inhaltsverzeichnis:
   1. :root — Alle CSS Custom Properties (Design-Tokens)
      - Farben (Palette, Semantik, Status)
      - Navigation
      - Border Radii & Transitions
      - Abstände
      - Layout
      - Schrift
      - Schatten
   REGEL: Ausschließlich :root { }. Kein Selektor erlaubt.
   ════════════════════════════════════════════════════ */

:root {
  /* Farben – organische Grünpalette (Erde, Wiese, Leder) */
  --primary:        #4d6630;   /* Waldgrün – Hauptfarbe                */
  --primary-deep:   #3d5224;   /* Tiefgrün – Hover, Footer             */
  --secondary:      #8a9a7e;   /* Nebel-Salbei – sekundäre Elemente    */
  --white:          #ffffff;
  --on-primary:     #ffffff;   /* Text auf Primary-Hintergrund – bleibt in Dark Mode hell */
  --highlight:      #f2b84b;   /* Bernstein/Gold – CTA, Highlights     */
  --light-bg:       #f0e8da;   /* Warmes Kreide-Weiß – Hintergründe   */
  --soft-text:      #687860;   /* Gedämpftes Salbeigrau – Sekundärtext */
  --border-soft:    rgba(55, 74, 32, 0.20);
  --overlay-bg:     rgba(44, 60, 24, 0.40);

  /* Navigation */
  --nav-height:          72px;
  --nav-height-scrolled: 64px;

  /* Logo: etwas Luft zum Header-Rand; schrumpft beim Scrollen */
  --logo-size:           54px;
  --logo-size-scrolled:  46px;
  --logo-size-mobile:    48px;

  /* Border Radii */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius:    8px;   /* Alias — häufigster Einzelwert */

  /* Transition */
  --transition:      0.18s ease;
  --transition-fast: 0.12s ease;
  --transition-slow: 0.22s ease;

  /* Farben — Status & Semantik */
  --color-error:    #c0392b;
  --color-success:  #1e7e4a;
  --color-warning:  #d4820a;
  --color-text:     #1e2518;   /* Fließtext (dunkler als --primary)    */

  /* Semantische Text-Farben für Status-Alerts */
  --color-success-text: #14532d;
  --color-error-text:   #7f1d1d;
  --color-warning-text: #7a4200;
  --color-info-text:    #5c3d00;
  --color-tag-gold:     #7a5500;
  --color-nav-link:     rgba(255,255,255,0.85);

  /* Semantische Hintergrundfarben */
  --bg-success-soft:  #edfaf3;
  --bg-warning-soft:  #fff8ed;
  --bg-error-soft:    #fdf0ef;
  --bg-info-soft:     #fef3d8;

  /* Semantische Border-Farben */
  --border-success:   rgba(30, 126, 74, 0.25);
  --border-warning:   rgba(212, 130, 10, 0.30);
  --border-error:     rgba(192, 57, 43, 0.25);
  --border-info:      rgba(242, 184, 75, 0.40);

  /* Ergänzte Tokens (P1.1) */
  --primary-rgb:    77, 102, 48;   /* = #4d6630 für rgba() Berechnungen */
  --card-bg:        #ffffff;
  --surface:        #ffffff;
  --bg-soft:        #f7f9f4;       /* Helles Graugrün */
  --accent:         #c8102e;       /* Admin-Akzentrot */
  --color-gold:     #c9a84c;       /* AI-FAB, Gold-Highlights */
  --curator-green:  #0e6b5e;       /* Kuratoren-Badge */
  --toast-bg:       #1a1a2e;       /* Toast-Hintergrund */
  --danger-deep:    #a93226;       /* .btn--danger:hover */
  --hero-blue:      #0e4f7a;       /* Welcome-Hero Gradient-Stop */
  --hover-bg:       #e8e0d5;       /* Subtiler Hover-Hintergrund */

  /* Focus-Ring */
  --focus-ring-shadow: 0 0 0 3px rgba(77, 102, 48, 0.15);

  /* Abstände */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Layout */
  --max-width:       1200px;
  --content-padding: 0 1.5rem;

  /* Schrift */
  --font-family:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm:   0.8rem;   /* tdb4 */
  --font-size-lg:   1.125rem; /* tdb2 */
  --font-size-xl:   2rem;     /* tdb1 */
  --font-size-h1:   2rem;     /* tdb1 */
  --font-size-h2:   1.125rem; /* tdb2 */
  --font-size-h3:   1rem;     /* tdb2 – kleiner als h2 für Hierarchie */
  --font-size-tag:  0.775rem; /* Tag-Sonderfall */
  --line-height:    1.65;

  /* Schatten */
  --shadow-sm: 0 1px 4px rgba(55, 74, 32, 0.08);
  --shadow-md: 0 4px 16px rgba(55, 74, 32, 0.13);
  --shadow-lg: 0 8px 28px rgba(55, 74, 32, 0.18);

  /* Discover-Modus Kategorie-Akzentfarben (7 Slots, zyklisch via nth-child) */
  --disc-cat-1: #4d6630;   /* Waldgrün   */
  --disc-cat-2: #b87a10;   /* Honigbraun */
  --disc-cat-3: #0e6b5e;   /* Teal       */
  --disc-cat-4: #7a3e8a;   /* Pflaume    */
  --disc-cat-5: #1e4f7a;   /* Marineblau */
  --disc-cat-6: #8b4513;   /* Sattelbraun*/
  --disc-cat-7: #4a5e8b;   /* Indigo     */
}


/* ── Dark Mode: Token-Overrides ─────────────────────────────────────────────
   Überschreibt Farbtokens für Nutzer mit prefers-color-scheme: dark.
   Alle Komponenten leiten sich von diesen Tokens ab — kein Selektor doppelt.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Hintergründe */
    --white:          #1c2419;
    --light-bg:       #242e1f;

    /* Text */
    --color-text:     #dde8d8;
    --soft-text:      #8aac7e;

    /* Rahmen */
    --border-soft:    rgba(160, 200, 130, 0.15);
    --overlay-bg:     rgba(10, 18, 6, 0.72);

    /* Schatten */
    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.35);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.50);
    --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.65);

    /* Status-Hintergründe (gedämpft für Dark) */
    --bg-success-soft: rgba(30, 126, 74, 0.18);
    --bg-warning-soft: rgba(212, 130, 10, 0.18);
    --bg-error-soft:   rgba(192, 57, 43, 0.18);
    --bg-info-soft:    rgba(242, 184, 75, 0.15);

    /* Focus-Ring */
    --focus-ring-shadow: 0 0 0 3px rgba(120, 180, 90, 0.25);

    /* Discover-Modus (heller für Dark Mode) */
    --disc-cat-1: #7aad4d;
    --disc-cat-2: #d4a030;
    --disc-cat-3: #1aaa94;
    --disc-cat-4: #a960c0;
    --disc-cat-5: #3a7abf;
    --disc-cat-6: #c45a1a;
    --disc-cat-7: #7a90c5;
  }
}