/* ============================================================
   BACK9OPS BRAND TOKENS
   Centralised CSS custom properties for the entire application.
   All color, shadow, radius, and spacing decisions live here.
   Never hardcode these values in component or page CSS files.

   THEME STRATEGY: Dark is the default. The admin shell is always
   dark. Use [data-theme="light"] if a light surface is ever needed
   for a specific section (e.g. public-facing pages).
   ============================================================ */

:root {

  /* ── Design-system spec tokens ───────────────────────────── */
  /* These are the canonical values. All semantic aliases below  */
  /* map onto these. Use --brand-* / --bg-* in new components.  */
  --bg-app:         #020617;
  --bg-surface:     #0F172A;
  --bg-elevated:    #111827;
  --bg-raised:      #1E293B;      /* inputs, inline panels */

  --text-primary:   #F3F6FB;
  --text-secondary: #C2CFDF;
  --text-muted:     #9FB0C4;
  --text-helper:    #B3C0D2;

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.20);

  --brand:          #1D4ED8;
  --brand-hover:    #2563EB;
  --brand-active:   #1E40AF;
  --brand-soft:     rgba(29,78,216,0.15);
  --brand-ring:     rgba(29,78,216,0.30);

  /* ── Primary (Blue) ─────────────────────────────────────── */
  --b9-primary:        #1D4ED8;
  --b9-primary-hover:  #2563EB;
  --b9-primary-active: #1E40AF;
  --b9-primary-soft:   rgba(29,78,216,0.15);
  --b9-primary-text:   #93C5FD;   /* readable blue on dark */

  /* ── Accent Green (golf-inspired) ───────────────────────── */
  --b9-accent-green:       #22C55E;
  --b9-accent-green-hover: #16A34A;
  --b9-accent-green-soft:  rgba(34,197,94,0.14);
  --b9-accent-green-text:  #86EFAC;

  /* ── Surfaces (dark-first) ───────────────────────────────── */
  --b9-surface:        var(--bg-app);
  --b9-surface-alt:    var(--bg-surface);
  --b9-surface-muted:  var(--bg-elevated);

  /* ── Borders ────────────────────────────────────────────── */
  --b9-border:         var(--border-subtle);
  --b9-border-strong:  var(--border-default);

  /* ── Typography ─────────────────────────────────────────── */
  --b9-text:           var(--text-primary);
  --b9-text-muted:     var(--text-secondary);
  --b9-text-soft:      var(--text-muted);
  --b9-text-helper:    var(--text-helper);
  --b9-text-on-dark:   var(--text-primary);

  /* ── Player readability aliases ─────────────────────────── */
  --player-text-primary:   var(--b9-text);
  --player-text-secondary: var(--b9-text-muted);
  --player-text-muted:     var(--b9-text-soft);
  --player-text-inverse:   #ffffff;
  --player-surface-card:   var(--b9-surface-alt);
  --player-surface-elev:   var(--b9-surface-muted);
  --player-border:         var(--b9-border);
  --player-focus-ring:     var(--b9-focus-ring);
  --player-link:           var(--b9-link);
  --player-link-hover:     var(--b9-link-hover);
  --player-table-head-text: var(--b9-text-muted);
  --player-disabled-text:   color-mix(in srgb, var(--b9-text-muted) 72%, transparent);
  --player-success-text:    var(--b9-success-text);
  --player-warning-text:    var(--b9-warning-text);
  --player-danger-text:     var(--b9-danger-text);

  /* ── Status: Success ────────────────────────────────────── */
  --b9-success:        #22C55E;
  --b9-success-soft:   rgba(34,197,94,0.14);
  --b9-success-text:   #86EFAC;

  /* ── Status: Warning ────────────────────────────────────── */
  --b9-warning:        #F59E0B;
  --b9-warning-soft:   rgba(245,158,11,0.14);
  --b9-warning-text:   #FCD34D;

  /* ── Status: Danger ─────────────────────────────────────── */
  --b9-danger:         #EF4444;
  --b9-danger-soft:    rgba(239,68,68,0.14);
  --b9-danger-text:    #FCA5A5;

  /* ── Status: Info ───────────────────────────────────────── */
  --b9-info:           #38BDF8;
  --b9-info-soft:      rgba(56,189,248,0.12);
  --b9-info-text:      #7DD3FC;

  /* ── Compatibility aliases ──────────────────────────────── */
  /* Some components (e.g. the league Command Center confirm    */
  /* dialogs) were authored against token names that never      */
  /* existed in this file. An undefined var() with no fallback  */
  /* collapses background to transparent and color to inherited */
  /* — which made those dialogs render as a see-through card    */
  /* with an invisible action button. Map the mistaken names    */
  /* onto the canonical tokens. Additive: nothing above changes */
  /* and light-theme overrides flow through automatically.      */
  /* Prefer --bg-* / --text-* / --b9-warning|danger|success in  */
  /* new code rather than these aliases.                        */
  --b9-surface-raised:    var(--bg-raised);
  --b9-text-secondary:    var(--text-secondary);
  --b9-accent:            var(--brand);
  --color-success:        var(--b9-success);
  --color-success-subtle: var(--b9-success-soft);
  --color-warn:           var(--b9-warning);
  --color-warn-subtle:    var(--b9-warning-soft);
  --color-danger:         var(--b9-danger);
  --color-danger-subtle:  var(--b9-danger-soft);

  /* ── Dark Palette (static — sidebar always uses these) ─── */
  --b9-dark-bg:            #020617;
  --b9-dark-surface:       #0F172A;
  --b9-dark-surface-alt:   #111827;
  --b9-dark-surface-raise: #1E293B;
  --b9-dark-border:        rgba(255,255,255,0.08);
  --b9-dark-border-subtle: rgba(255,255,255,0.06);
  --b9-dark-text:          #F3F6FB;
  --b9-dark-text-muted:    #C2CFDF;
  --b9-dark-text-soft:     #9FB0C4;

  /* ── Semantic Aliases ───────────────────────────────────── */

  /* Cards */
  --b9-card-bg:         var(--bg-surface);
  --b9-card-border:     var(--border-subtle);
  --b9-card-shadow:     0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05);
  --b9-card-shadow-md:  0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.07);
  --b9-card-shadow-hover: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12);
  --b9-card-shadow-xl:  0 25px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12);
  --b9-card-radius:     12px;

  /* ── Sidebar (always dark, independent of theme) ─────────── */
  /* These never change — the sidebar is always dark.          */
  --bg-sidebar:             #0B1220;
  --bg-sidebar-elevated:    #0F172A;
  --bg-sidebar-active:      rgba(29,78,216,0.18);

  --b9-sidebar-bg:          #0B1220;
  --b9-sidebar-text:        #94A3B8;
  --b9-sidebar-text-muted:  #64748B;
  --b9-sidebar-border:      rgba(255,255,255,0.06);
  --b9-sidebar-active-bg:   rgba(29,78,216,0.18);
  --b9-sidebar-active-text: #E5E7EB;
  --b9-sidebar-hover-bg:    #0F172A;

  /* Top bar */
  --b9-topbar-bg:      var(--bg-surface);
  --b9-topbar-border:  var(--border-subtle);
  --b9-topbar-height:  3.5rem;

  /* Focus ring */
  --b9-focus-ring: 0 0 0 3px var(--brand-ring);

  /* Links */
  --b9-link:       #60A5FA;
  --b9-link-hover: #93C5FD;

  /* Forms */
  --b9-input-bg:           var(--bg-elevated);
  --b9-input-border:       var(--border-default);
  --b9-input-border-focus: var(--brand);
  --b9-input-placeholder:  var(--text-muted);
  --b9-input-radius:       8px;

  /* Tables */
  --b9-table-header-bg:   var(--bg-elevated);
  --b9-table-row-hover:   rgba(255,255,255,0.04);
  --b9-table-border:      var(--border-subtle);

  /* Badges */
  --b9-badge-neutral-bg:   rgba(255,255,255,0.08);
  --b9-badge-neutral-text: var(--text-secondary);
  --b9-badge-radius:       20px;

  /* Spacing */
  --b9-page-padding-x: 1.5rem;
  --b9-page-padding-y: 1.5rem;

  /* Typography */
  --b9-font-sans: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --b9-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  --font-size-base: 1rem;
  --font-size-sm: 14px;
  --touch-target-min: 48px;
  --color-gray-400: #94A3B8;

  /* ── fo-* spec aliases ───────────────────────────────────── */
  --fo-primary:          var(--brand);
  --fo-primary-hover:    var(--brand-hover);
  --fo-bg:               var(--bg-app);
  --fo-surface:          var(--bg-surface);
  --fo-surface-alt:      var(--bg-elevated);
  --fo-border:           var(--border-default);
  --fo-text:             var(--text-primary);
  --fo-text-muted:       var(--text-secondary);
  --fo-dark-bg:          var(--bg-app);
  --fo-dark-surface:     var(--bg-surface);
  --fo-dark-surface-alt: var(--bg-elevated);
  --fo-dark-border:      var(--border-default);
  --fo-dark-text:        var(--text-primary);
  --fo-dark-text-muted:  var(--text-secondary);

  /* ── Spacing scale (4-based) ─────────────────────────────── */
  /* Use these tokens instead of arbitrary rem/px values.      */
  /* 4px increments: xs=4, sm=8, md=12, base=16, lg=20, xl=24 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius scale ─────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ── Transition timing ───────────────────────────────────── */
  --t-fast:   100ms;
  --t-base:   160ms;
  --t-slow:   240ms;
  --t-ease:   ease;
  --t-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 200;
  --z-sticky:   400;
  --z-fixed:    600;
  --z-overlay:  800;
  --z-modal:    1000;
  --z-toast:    1200;
  --z-tooltip:  1400;

  /* ── Component sizes ─────────────────────────────────────── */
  --hdr-height:     56px;
  --sidebar-width:  250px;
  --content-max-w:  1280px;
  --form-max-w:     640px;
  --modal-max-w:    560px;
}

/* ============================================================
   LIGHT THEME OVERRIDE
   Only applied to specific sections that need a light surface
   (e.g. public-facing embeds). The admin shell is always dark.
   ============================================================ */
[data-theme="light"] {
  --bg-app:         #F8F9FA;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F1F5F9;
  --bg-raised:      #E2E8F0;
  --text-primary:   #1A1A1A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --border-subtle:  #E5E7EB;
  --border-default: #CBD5E1;
  --border-strong:  #94A3B8;
  --b9-surface:        #F8F9FA;
  --b9-surface-alt:    #FFFFFF;
  --b9-surface-muted:  #F1F5F9;
  --b9-border:         #E5E7EB;
  --b9-border-strong:  #CBD5E1;
  --b9-text:           #1A1A1A;
  --b9-text-muted:     #475569;
  --b9-text-soft:      #64748B;
  --b9-card-bg:        #FFFFFF;
  --b9-card-border:    #E5E7EB;
  --b9-card-shadow:    0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --b9-card-shadow-md: 0 4px 12px rgba(15,23,42,0.10);
  --b9-primary-soft:   #DBEAFE;
  --b9-primary-text:   #1E40AF;
  --b9-input-bg:       #FFFFFF;
  --b9-input-border:   #CBD5E1;
  --b9-input-placeholder: #94A3B8;
  --b9-table-header-bg:  #F1F5F9;
  --b9-table-row-hover:  #F0F7FF;
  --b9-badge-neutral-bg:   #F1F5F9;
  --b9-badge-neutral-text: #475569;
  --b9-success-soft:   #DCFCE7;
  --b9-success-text:   #14532D;
  --b9-warning-soft:   #FEF3C7;
  --b9-warning-text:   #78350F;
  --b9-danger-soft:    #FEE2E2;
  --b9-danger-text:    #991B1B;
  --b9-info-soft:      #E0F2FE;
  --b9-info-text:      #0C4A6E;
  --b9-accent-green-soft: #DCFCE7;
  --b9-accent-green-text: #15803D;
  --b9-link:       #1D4ED8;
  --b9-link-hover: #1E40AF;

  --player-text-primary:   var(--b9-text);
  --player-text-secondary: var(--b9-text-muted);
  --player-text-muted:     var(--b9-text-soft);
  --player-surface-card:   var(--b9-surface-alt);
  --player-surface-elev:   var(--b9-surface-muted);
  --player-border:         var(--b9-border);
  --player-link:           var(--b9-link);
  --player-link-hover:     var(--b9-link-hover);
  --player-table-head-text: var(--b9-text-muted);
  --player-success-text:    var(--b9-success-text);
  --player-warning-text:    var(--b9-warning-text);
  --player-danger-text:     var(--b9-danger-text);
}


/* ============================================================
   BOOTSTRAP 5 TOKEN OVERRIDES
   Override Bootstrap custom properties to align with the
   Back9Ops palette — avoids fighting the framework.
   ============================================================ */
:root {
  --bs-primary:          var(--brand);
  --bs-primary-rgb:      29,78,216;
  --bs-success:          var(--b9-success);
  --bs-success-rgb:      34,197,94;
  --bs-warning:          var(--b9-warning);
  --bs-warning-rgb:      245,158,11;
  --bs-danger:           var(--b9-danger);
  --bs-danger-rgb:       239,68,68;
  --bs-info:             var(--b9-info);
  --bs-info-rgb:         56,189,248;
  --bs-body-bg:          var(--bg-app);
  --bs-body-color:       var(--text-primary);
  --bs-secondary-color:  var(--text-secondary);
  --bs-tertiary-color:   var(--text-muted);
  /* RGB triplets + emphasis color for Bootstrap utilities that resolve through
     rgba(var(--bs-*-rgb), …) — e.g. .text-body, .bg-body, .text-body-emphasis.
     Bootstrap only defines these under `:root,[data-bs-theme=light]` (near-black
     #212529 = 33,37,41), and this app themes via [data-theme], not [data-bs-theme],
     so they were never re-pointed for dark. That made .text-body render near-black
     on dark surfaces (e.g. the Settings → Public club page URL). Pin them to the
     dark palette here; html[data-theme="light"] overrides below. Triplets must be
     literals — var(--text-primary) cannot feed an rgba() channel list. */
  --bs-body-color-rgb:      243, 246, 251;   /* --text-primary   #F3F6FB */
  --bs-body-bg-rgb:         2, 6, 23;        /* --bg-app         #020617 */
  --bs-emphasis-color:      var(--text-primary);
  --bs-emphasis-color-rgb:  243, 246, 251;   /* --text-primary   #F3F6FB */
  --bs-secondary-color-rgb: 194, 207, 223;   /* --text-secondary #C2CFDF */
  --bs-tertiary-color-rgb:  159, 176, 196;   /* --text-muted     #9FB0C4 */
  --bs-border-color:     var(--border-subtle);
  --bs-link-color:       var(--b9-link);
  --bs-link-hover-color: var(--b9-link-hover);
  --bs-font-sans-serif:  var(--b9-font-sans);
  --bs-body-font-family: var(--b9-font-sans);
  --bs-border-radius:    8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-sm: 6px;
  --bs-card-bg:              var(--bg-surface);
  --bs-card-border-color:    var(--border-subtle);
  --bs-card-box-shadow:      var(--b9-card-shadow);
  /* Form controls */
  --bs-form-control-bg:       var(--bg-elevated);
  --bs-form-control-color:    var(--text-primary);
  --bs-form-control-border:   var(--border-default);
  --bs-input-bg:              var(--bg-elevated);
  --bs-input-color:           var(--text-primary);
  --bs-input-border-color:    var(--border-default);
  --bs-input-focus-border-color: var(--brand);
  --bs-input-placeholder-color:  var(--text-muted);
}

/* Light-theme triplets for the same Bootstrap utilities. Uses html[data-theme]
   (specificity 0,1,1) so it always wins over the :root block above regardless of
   source order. Non-rgb --bs-* vars adapt automatically (they reference tokens). */
html[data-theme="light"] {
  --bs-body-color-rgb:      26, 26, 26;     /* --text-primary   #1A1A1A */
  --bs-body-bg-rgb:         248, 249, 250;  /* --bg-app         #F8F9FA */
  --bs-emphasis-color-rgb:  26, 26, 26;     /* --text-primary   #1A1A1A */
  --bs-secondary-color-rgb: 71, 85, 105;    /* --text-secondary #475569 */
  --bs-tertiary-color-rgb:  100, 116, 139;  /* --text-muted     #64748B */
}