/* ============================================================
   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;

  /* ── 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);
  --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);
}