/**
 * SSG Ergebnisse — Design Tokens
 * Phase 1 (2026-04-25): Token-Foundation, keine visuelle Aenderung
 *
 * Diese Datei wird von frontend.css und meister.css per @import geladen.
 * Bestehende Klassen behalten ihre hardkodierten Farben — Tokens werden
 * in Phase 2 + Phase 3 schrittweise verwendet.
 */

:root {
  /* ============================================================
   * BRAND COLORS — SSG Navy & Akzente
   * ============================================================ */
  --ssg-navy:           #1e3560;  /* Primary Brand Navy */
  --ssg-navy-deep:      #152a50;  /* Tiefer Navy (Cards, dark) */
  --ssg-navy-soft:      #3a5a8a;  /* Heller Navy (Borders, Akzente) */
  --ssg-navy-darker:    #0a1837;  /* Sehr dunkel (Erfolge BG legacy) */

  /* ============================================================
   * TEXT COLORS
   * ============================================================ */
  --ssg-text-primary:   #152a50;  /* Body Navy auf Light-BG */
  --ssg-text-muted:     #6a86a8;  /* Sekundaer-Text */
  --ssg-text-on-dark:   #ffffff;  /* Weiss auf Navy */
  --ssg-text-on-light:  #1e3560;  /* Navy auf Weiss */

  /* ============================================================
   * SURFACES — Backgrounds
   * ============================================================ */
  --ssg-bg-page:        #ffffff;  /* Page-BG (Light) */
  --ssg-bg-soft:        #f5f8fc;  /* Soft Light (KPI-Karten Light, Filter-Block) */
  --ssg-bg-card-dark:   #152a50;  /* Card auf Dark (Meister KPIs) */
  --ssg-bg-card-navy:   #1e3560;  /* Card-Navy (Erfolge Hero, Phase 3 evtl.) */

  /* ============================================================
   * BORDERS
   * ============================================================ */
  --ssg-border-light:   #d5dde9;  /* Pill-Border, Card-Border light */
  --ssg-border-dark:    #3a5a8a;  /* Card-Border auf Navy */

  /* ============================================================
   * AKZENT — Gold (Brand-Highlight, Section-Headlines, Tab-Underline)
   * ============================================================ */
  --ssg-accent-gold:        #d4a017;  /* Tab-Underline Meister */
  --ssg-accent-gold-soft:   #d8a648;  /* Tab-Underline Erfolge (legacy) */
  --ssg-accent-gold-bright: #ffc800;  /* Medaille Gold */

  /* ============================================================
   * MEDAL COLORS — siehe DESIGN.md
   * ============================================================ */
  --ssg-medal-gold:     #ffc800;
  --ssg-medal-silver:   #a8bcdc;
  --ssg-medal-bronze:   #c8844a;

  /* ============================================================
   * PILL — Filter-Buttons (z.B. Altersklasse, Geschlecht, Bahn)
   * ============================================================ */
  --ssg-pill-bg:            #ffffff;
  --ssg-pill-bg-hover:      #dde5f1;
  --ssg-pill-bg-active:     var(--ssg-navy);
  --ssg-pill-fg:            var(--ssg-navy);
  --ssg-pill-fg-active:     #ffffff;
  --ssg-pill-border:        var(--ssg-border-light);
  --ssg-pill-border-hover:  #b3c3dc;
  --ssg-pill-border-active: var(--ssg-navy);
  --ssg-pill-radius:        16px;

  /* ============================================================
   * TAB — Content-Navigation (Highlights/National/International etc.)
   * ============================================================ */
  --ssg-tab-fg:             var(--ssg-text-muted);
  --ssg-tab-fg-active:      var(--ssg-text-primary);
  --ssg-tab-underline:      var(--ssg-accent-gold);
  --ssg-tab-underline-w:    3px;

  /* ============================================================
   * TABLE — alle Datentabellen einheitlich
   * ============================================================ */
  --ssg-table-header-bg:    var(--ssg-navy);
  --ssg-table-header-fg:    #ffffff;
  --ssg-table-row-bg:       #ffffff;
  --ssg-table-row-stripe:   #f5f8fc;
  --ssg-table-row-hover:    #e9eef8;
  --ssg-table-border:       #e0e6ef;

  /* ============================================================
   * SPACING + RADIUS (Reserve fuer spaetere Phasen)
   * ============================================================ */
  --ssg-radius-sm:      6px;
  --ssg-radius-md:      10px;
  --ssg-radius-lg:      14px;
}