/* ============================================================
   BrettZone v2 — Design Tokens
   Dark-only, NHRL-purple-cast surfaces, brand pink as accent,
   weight-class color coding harmonized with the NHRL 2022 palette.
   Sources of truth:
     docs/design_handoff_brettzone_refresh/BrettZone Refresh Brief.md §1
     docs/brettzone-refresh/special/New NHRL Brand Assets 2022 (brand guide)
   ============================================================ */

:root {
  /* ===== NHRL brand palette (2022 guide) ===== */
  --bz-brand-purple:    #291c5e;   /* primary dark purple            */
  --bz-brand-offwhite:  #f4f4f4;   /* primary off-white              */
  --bz-brand-teal:      #00dad8;   /* accent — teal                  */
  --bz-brand-pink:      #cf23ca;   /* accent — pink                  */
  --bz-brand-blue:      #666fe5;   /* secondary — light blue         */
  --bz-brand-lilac:     #c9ccf0;   /* secondary — light purple       */

  /* ===== Surfaces (dark-only, cast toward the brand purple) ===== */
  --bz-bg:              #0b0a16;
  --bz-surface-1:       #141126;   /* cards, panels         */
  --bz-surface-2:       #1b1734;   /* hover, inset wells    */
  --bz-surface-3:       #241e42;   /* score-bug, deep wells */
  --bz-border:          #2d2750;
  --bz-border-strong:   #3f3770;
  --bz-overlay:         rgba(10, 8, 20, 0.72);

  /* ===== Text (cool, slightly violet-cast; pure white banned) ===== */
  --bz-text:            #f0eff6;
  --bz-text-dim:        #bcb9cd;
  --bz-text-muted:      #7e7a94;
  --bz-text-faint:      #57536e;

  /* ===== Accent (brand pink — interactive) ===== */
  --bz-accent:          #cf23ca;
  --bz-accent-strong:   #ea5ce6;   /* brightened for hover/text on dark */
  --bz-accent-dim:      #6d1a6b;
  --bz-accent-bg:       rgba(207, 35, 202, 0.14);

  /* ===== Secondary accent (brand light blue — focus, links) ===== */
  --bz-focus:           #666fe5;
  --bz-focus-bg:        rgba(102, 111, 229, 0.14);

  /* ===== Weight class — coded across the system ===== */
  --bz-w3:              #00dad8;   /* 3lb       — brand teal, agile  */
  --bz-w12:             #f2a01c;   /* 12lb      — amber, drama       */
  --bz-w30:             #e8433f;   /* 30lb      — red,   heavy       */
  --bz-w-fs:            #9edd2c;   /* Freestyle — lime,  special     */
  --bz-w3-bg:           rgba(0, 218, 216, 0.12);
  --bz-w12-bg:          rgba(242, 160, 28, 0.12);
  --bz-w30-bg:          rgba(232, 67, 63, 0.12);
  --bz-w-fs-bg:         rgba(158, 221, 44, 0.12);

  /* ===== Status ===== */
  --bz-live:            #ff2e3d;
  --bz-live-bg:         rgba(255, 46, 61, 0.14);
  --bz-win:             #10b981;
  --bz-loss:            #6b7280;
  --bz-warn:            #f2a01c;

  /* ===== Type (self-hosted, see bz-fonts.css) =====
     display — DIN Next heavy caps: card titles, fighter names, nav
     hero    — Joyride: page heroes, wordmark, marquee moments ONLY
     ui      — DIN Next regular/medium: body and controls
     mono    — Berkeley Mono: scores, times, IDs                    */
  --bz-font-display:            "DIN Next LT Pro", "Barlow Condensed", system-ui, sans-serif;
  --bz-font-hero:               "Joyride", "DIN Next LT Pro", system-ui, sans-serif;
  --bz-font-hero-outline:       "Joyride Outline", "Joyride", system-ui, sans-serif;
  --bz-font-hero-wide:          "Joyride Wide", "Joyride", system-ui, sans-serif;
  --bz-font-hero-wide-outline:  "Joyride Wide Outline", "Joyride Wide", system-ui, sans-serif;
  --bz-font-ui:                 "DIN Next LT Pro", "Inter", system-ui, -apple-system, sans-serif;
  --bz-font-mono:               "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ===== Radii (slightly hard-edged) ===== */
  --bz-r-xs: 2px;
  --bz-r-sm: 4px;
  --bz-r-md: 6px;
  --bz-r-lg: 10px;
  --bz-r-hero: 8px;            /* marquee hero corner */

  /* ===== Corner cut (NHRL logo arena-corner motif) ===== */
  --bz-cut: 12px;              /* default notch size for .bz-cut */
  --bz-cut-lg: 20px;           /* heroes, score bug */

  /* ===== Motion ===== */
  --bz-d-fast: 120ms;
  --bz-d-base: 220ms;
  --bz-d-slow: 400ms;
  --bz-ease:   cubic-bezier(.2,.7,.3,1);

  /* ===== Shadows ===== */
  --bz-shadow-1:    0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --bz-shadow-2:    0 8px 24px rgba(0,0,0,0.45);
  --bz-glow-accent: 0 0 0 1px var(--bz-accent), 0 0 24px rgba(207,35,202,0.35);
  --bz-glow-focus:  0 0 0 1px var(--bz-focus),  0 0 20px rgba(102,111,229,0.35);
  --bz-glow-live:   0 0 0 1px var(--bz-live),   0 0 16px rgba(255,46,61,0.45);

  /* ===== Layout ===== */
  --bz-sidebar-w:   236px;
  --bz-topbar-h:    40px;
  --bz-content-max: 1440px;
  --bz-bracket-max: 1600px;

  /* ===== Mobile (Mobile Brief §1) ===== */
  --bz-bp-sm:       480px;          /* phones                       */
  --bz-bp-md:       768px;          /* small tablets / large phones */
  --bz-bp-lg:       1100px;         /* sidebar appears              */
  --bz-bp-xl:       1440px;         /* max content width            */

  /* Touch-target floor (NHRL audience swipes hard with gloves on at events) */
  --bz-touch-min:   44px;

  /* iOS safe-area insets — viewport-fit=cover must be set in <head> */
  --bz-safe-top:    env(safe-area-inset-top,    0px);
  --bz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bz-safe-left:   env(safe-area-inset-left,   0px);
  --bz-safe-right:  env(safe-area-inset-right,  0px);

  /* Mobile chrome heights */
  --bz-mtopbar-h:   54px;           /* content height; safe-area adds on top */
  --bz-tabbar-h:    62px;           /* above home indicator             */
  --bz-tabbar-pad:  calc(var(--bz-tabbar-h) + var(--bz-safe-bottom));
}

/* ===== Reduced motion overrides ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}