/* =====================================================================
   BUCKED FIGHT LEAGUE — DESIGN TOKENS
   Dark luxury combat aesthetic. Light mode is intentionally minimal —
   the fight world wants the lights down low.
===================================================================== */

:root {
    /* Brand */
    --bk-red:           #d62828;
    --bk-red-deep:      #9c1414;
    --bk-red-glow:      rgba(214, 40, 40, 0.55);
    --bk-gold:          #ffcc00;
    --bk-gold-soft:     rgba(255, 204, 0, 0.18);
    --bk-gold-deep:     #d4a800;
    --bk-blue:          #2979ff;
    --bk-cyan:          #00d4ff;

    /* Surfaces (dark default) */
    --bk-bg:            #0a0a0a;
    --bk-bg-2:          #0d0d10;
    --bk-surface:       #111114;
    --bk-surface-2:     #16161b;
    --bk-surface-3:     #1d1d24;
    --bk-overlay:       rgba(10, 10, 10, 0.72);

    /* Text */
    --bk-text:          #f5f5f5;
    --bk-text-soft:     #d6d6dc;
    --bk-text-muted:    #9aa0aa;
    --bk-text-faint:    #6a6f7a;
    --bk-text-on-gold:  #1a1200;
    --bk-text-on-red:   #ffffff;

    /* Borders / strokes */
    --bk-border:        rgba(255, 255, 255, 0.08);
    --bk-border-strong: rgba(255, 255, 255, 0.16);
    --bk-border-gold:   rgba(255, 204, 0, 0.40);

    /* Status */
    --bk-live:          #ff2d2d;
    --bk-live-soft:     rgba(255, 45, 45, 0.18);
    --bk-success:       #4ade80;
    --bk-warning:       #fbbf24;
    --bk-danger:        #f87171;

    /* Shadows */
    --bk-shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.45);
    --bk-shadow-md:     0 12px 32px rgba(0, 0, 0, 0.55);
    --bk-shadow-lg:     0 24px 60px rgba(0, 0, 0, 0.65);
    --bk-shadow-red:    0 0 30px rgba(214, 40, 40, 0.35);
    --bk-shadow-gold:   0 0 30px rgba(255, 204, 0, 0.32);

    /* Geometry */
    --bk-radius-xs:     4px;
    --bk-radius-sm:     8px;
    --bk-radius-md:     14px;
    --bk-radius-lg:     22px;
    --bk-radius-pill:   999px;

    /* Layout */
    --bk-max-w:         1320px;
    --bk-gutter:        clamp(16px, 4vw, 40px);
    --bk-header-h:      72px;
    --bk-bottomnav-h:   68px;

    /* Type scale */
    --bk-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --bk-font-display:  'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
    --bk-font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --bk-fs-xs:         11px;
    --bk-fs-sm:         13px;
    --bk-fs-base:       15px;
    --bk-fs-md:         17px;
    --bk-fs-lg:         20px;
    --bk-fs-xl:         28px;
    --bk-fs-2xl:        38px;
    --bk-fs-3xl:        clamp(40px, 6vw, 72px);
    --bk-fs-hero:       clamp(56px, 10vw, 132px);

    /* Motion */
    --bk-ease:          cubic-bezier(0.22, 1, 0.36, 1);
    --bk-dur-fast:      150ms;
    --bk-dur-base:      280ms;
    --bk-dur-slow:      520ms;
}

/* Light mode (minor surface flip — kept tasteful for promo pages / press kits) */
[data-theme="light"] {
    --bk-bg:            #f4f4f0;
    --bk-bg-2:          #ffffff;
    --bk-surface:       #ffffff;
    --bk-surface-2:     #f7f7f3;
    --bk-surface-3:     #ececea;
    --bk-overlay:       rgba(255, 255, 255, 0.88);

    --bk-text:          #0a0a0a;
    --bk-text-soft:     #232326;
    --bk-text-muted:    #4a4f59;
    --bk-text-faint:    #7a8090;
    --bk-text-on-red:   #ffffff;

    --bk-border:        rgba(10, 10, 10, 0.10);
    --bk-border-strong: rgba(10, 10, 10, 0.20);
}