/**
 * Design Tokens — Kanonische Referenz für das gesamte Design-System.
 *
 * Diese Datei ist die Single Source of Truth für Farben, Abstände,
 * Typografie und Layout-Konstanten. Alle anderen CSS-Dateien sollen
 * diese Tokens referenzieren statt Werte direkt zu codieren.
 *
 * Rückwärtskompatible Aliases (--bg-color, --lp-* etc.) verweisen
 * auf die neuen Tokens, sodass bestehender Code weiterhin funktioniert.
 *
 * @version 1.0
 * @see docs/conventions/UI_STYLE_PLAN.md Section 1
 */

:root {
    /* =========================================
       1. FARBEN
       ========================================= */

    /* Hintergrund */
    --color-bg:             #f0f2f5;
    --color-bg-light:       #f8f9fa;
    --color-surface:        #ffffff;

    /* Text */
    --color-text:           #2c3e50;
    --color-text-muted:     #7f8c8d;
    --color-text-inverse:   #ffffff;

    /* Akzent / Semantisch */
    --color-primary:        #3498db;
    --color-primary-hover:  #2980b9;
    --color-success:        #2ecc71;
    --color-warning:        #f1c40f;
    --color-danger:         #e74c3c;
    --color-info:           #6c757d;

    /* Rahmen & Schatten */
    --color-border:         #ddd;
    --color-border-light:   #eee;
    --color-shadow:         rgba(0, 0, 0, 0.05);

    /* Glass-UI (Mobile Overlays) */
    --glass-bg:             rgba(255, 255, 255, 0.88);
    --glass-blur:           10px;


    /* =========================================
       2. ABSTÄNDE (Spacing Scale)
       ========================================= */

    --space-xs:    0.25rem;   /*  4px */
    --space-sm:    0.5rem;    /*  8px */
    --space-md:    1rem;      /* 16px */
    --space-lg:    1.5rem;    /* 24px */
    --space-xl:    2rem;      /* 32px */
    --space-2xl:   3rem;      /* 48px */


    /* =========================================
       3. TYPOGRAFIE
       ========================================= */

    --font-family:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono:     'Courier New', monospace;

    --font-size-xs:    0.75rem;   /* 12px */
    --font-size-sm:    0.85rem;   /* ~14px */
    --font-size-base:  1rem;      /* 16px */
    --font-size-lg:    1.2rem;    /* ~19px */
    --font-size-xl:    1.5rem;    /* 24px */
    --font-size-2xl:   2rem;      /* 32px */


    /* =========================================
       4. LAYOUT
       ========================================= */

    --sidebar-width:      320px;
    --toolbar-height:     50px;
    --border-radius:      6px;
    --border-radius-lg:   8px;

    /* Touch Target (WCAG / Apple HIG Minimum) */
    --touch-target-min:   44px;


    /* =========================================
       5. RÜCKWÄRTSKOMPATIBLE ALIASES
       Bestehender Code nutzt diese Namen.
       Neue Dateien sollen die kanonischen
       Token-Namen (oben) verwenden.
       ========================================= */

    /* style.css Legacy */
    --bg-color:            var(--color-bg);
    --sidebar-bg:          var(--color-surface);
    --text-main:           var(--color-text);
    --text-muted:          var(--color-text-muted);
    --accent-blue:         var(--color-primary);
    --accent-blue-hover:   var(--color-primary-hover);
    --accent-red:          var(--color-danger);
    --accent-green:        var(--color-success);
    --accent-yellow:       var(--color-warning);
    --border-color:        var(--color-border);

    /* learning-path.css Legacy */
    --lp-bg-color:         var(--color-bg-light);
    --lp-sidebar-width:    350px;
    --lp-text-color:       var(--color-text);
    --lp-accent-color:     var(--color-primary);
    --lp-success-color:    var(--color-success);
    --lp-warning-color:    var(--color-warning);
    --lp-danger-color:     var(--color-danger);
    --lp-spacing:          var(--space-lg);

    /* =========================================
       Z-INDEX SCALE
       Dokumentiert zur Vermeidung von Konflikten.
       Keine CSS-Custom-Properties nötig —
       die Werte sind in den jeweiligen Dateien gesetzt.
       -----------------------------------------
       z:   2  – step-badge.active (rotatebox)
       z:   5  – sticky game-wrapper (scroll-content)
       z:  10  – sidebar, flowchart checking-node
       z:  20  – toolbar (viewport-full)
       z:  50  – tuner-info tooltips (arena)
       z:  80  – FAB button (viewport-full)
       z: 100  – bottom-sheets / overlays (mobile)
       z: 200  – modals (knights-tour)
       z: 8000 – mobile-taskbar (responsive)
       z: 9000 – orientation-hint (responsive)
       ========================================= */
}