/* =============================================================================
   DartBullz Design Tokens
   1:1 vom Mockup übernommen, an einer Stelle gepflegt.
   ============================================================================= */

:root {
    /* Brand */
    --brand-red:         #c11d1d;
    --brand-red-dark:    #8a0e0e;
    --brand-red-bright:  #e63232;
    --brand-green:       #1a7a3e;
    --brand-green-bright:#2da55a;

    /* Theme: DARK (default) */
    --bg-base:    #0a0a0c;
    --bg-elev-1:  #131318;
    --bg-elev-2:  #1a1a21;
    --bg-elev-3:  #22222b;
    --bg-overlay: rgba(10, 10, 12, 0.85);

    --text-primary:   #f5f5f7;
    --text-secondary: #a8a8b3;
    --text-tertiary:  #6c6c78;
    --text-inverse:   #0a0a0c;

    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong:  rgba(255, 255, 255, 0.24);

    --accent:      var(--brand-red-bright);
    --accent-fg:   #ffffff;
    --accent-soft: rgba(230, 50, 50, 0.12);

    --success: #2da55a;
    --warning: #d97706;
    --danger:  #dc2626;
    --info:    #3b82f6;

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px rgba(230, 50, 50, 0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --font-display: 'Bebas Neue', 'Impact', sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
}

[data-theme="light"] {
    --bg-base:    #fafaf7;
    --bg-elev-1:  #ffffff;
    --bg-elev-2:  #f4f4f0;
    --bg-elev-3:  #ebebe5;
    --bg-overlay: rgba(255, 255, 255, 0.85);

    --text-primary:   #0e0e10;
    --text-secondary: #4a4a55;
    --text-tertiary:  #88889a;
    --text-inverse:   #ffffff;

    --border-subtle:  rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.12);
    --border-strong:  rgba(0, 0, 0, 0.24);

    --accent:      var(--brand-red);
    --accent-soft: rgba(193, 29, 29, 0.08);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 60px rgba(193, 29, 29, 0.08);
}