/**
 * VBM Design System — tokens.css
 *
 * CSS custom properties for the mobile-first VBM interface.
 * This is the single source of truth for all design tokens.
 *
 * IMPORTANT: The accent color (--vbm-accent, --vbm-accent-text) uses default
 * values here but MUST be overridden per-club via an inline <style> block
 * injected server-side on each page load. Example:
 *
 *   <style>
 *     :root {
 *       --vbm-accent: #ff6b35;
 *       --vbm-accent-text: #ffffff;
 *     }
 *   </style>
 *
 * All other tokens are fixed to the locked dark theme and should not be
 * overridden.
 */

:root {

  /* =========================================================
     COLORS — locked dark theme
     ========================================================= */

  /* Backgrounds */
  --vbm-bg-deep:     #0a0e17;
  --vbm-bg-surface:  #1e293b;
  --vbm-bg-elevated: #334155;
  --vbm-bg-overlay:  rgba(10, 14, 23, 0.9);

  /* Text */
  --vbm-text-primary:   #f8fafc;
  --vbm-text-secondary: #94a3b8;
  --vbm-text-muted:     #64748b;

  /* Borders */
  --vbm-border:       rgba(148, 163, 184, 0.08);
  --vbm-border-strong: rgba(148, 163, 184, 0.15);

  /* Primary — theme-controlled action color for buttons, links, focus rings.
     NOT overridden per-club. We control this for accessibility. */
  --vbm-primary:      #38bdf8;
  --vbm-primary-text: #0f172a;

  /* Club brand accent — set per-club via inline style for header/logo touches only */
  --vbm-accent:      #38bdf8;
  --vbm-accent-text: #0f172a;

  /* Club header branding — overridden per-club via inline style */
  --vbm-header-bg:    var(--vbm-bg-surface);
  --vbm-header-color: var(--vbm-text-primary);


  /* =========================================================
     SEMANTIC COLORS
     ========================================================= */

  --vbm-success:    #4ade80;
  --vbm-success-bg: rgba(34, 197, 94, 0.15);

  --vbm-warning:    #fbbf24;
  --vbm-warning-bg: rgba(251, 191, 36, 0.15);

  --vbm-danger:     #f87171;
  --vbm-danger-bg:  rgba(239, 68, 68, 0.15);

  --vbm-info:       #38bdf8;
  --vbm-info-bg:    rgba(56, 189, 248, 0.15);

  --vbm-league:     #a78bfa;
  --vbm-league-bg:  rgba(139, 92, 246, 0.15);


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --vbm-font:      -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --vbm-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Font sizes — rem values based on 16px browser default */
  --vbm-text-xs:   0.6875rem; /* 11px */
  --vbm-text-sm:   0.8125rem; /* 13px */
  --vbm-text-base: 0.9375rem; /* 15px */
  --vbm-text-lg:   1.125rem;  /* 18px */
  --vbm-text-xl:   1.25rem;   /* 20px */
  --vbm-text-2xl:  1.375rem;  /* 22px */


  /* =========================================================
     SPACING — 4px base grid
     ========================================================= */

  --vbm-space-xs: 0.25rem; /*  4px */
  --vbm-space-sm: 0.5rem;  /*  8px */
  --vbm-space-md: 0.75rem; /* 12px */
  --vbm-space-lg: 1rem;    /* 16px */
  --vbm-space-xl: 1.5rem;  /* 24px */
  --vbm-space-2xl: 2rem;   /* 32px */


  /* =========================================================
     BORDER RADIUS
     ========================================================= */

  --vbm-radius-sm:   4px;
  --vbm-radius-md:   8px;
  --vbm-radius-lg:   12px;
  --vbm-radius-pill: 20px;
  --vbm-radius-full: 50%;


  /* =========================================================
     LAYOUT
     ========================================================= */

  --vbm-header-height:     56px;
  --vbm-bottom-nav-height: 68px;
  --vbm-content-max:       960px;
  --vbm-touch-min:         44px;  /* minimum tap target size */
  --vbm-safe-bottom:       24px;  /* extra clearance above bottom nav */


  /* =========================================================
     TRANSITIONS
     ========================================================= */

  --vbm-transition-fast: 150ms ease;
  --vbm-transition-base: 250ms ease;


  /* =========================================================
     Z-INDEX SCALE
     ========================================================= */

  --vbm-z-header:     100;
  --vbm-z-bottom-nav: 100;
  --vbm-z-sticky-cta:  90;
  --vbm-z-overlay:    200;
  --vbm-z-modal:      300;

}

/* =========================================================
   LIGHT THEME — applied via .vbm-light on <body>
   Overrides all dark color tokens with light equivalents.
   Club accent color (--vbm-accent) is still set per-club
   via inline style and is NOT overridden here.
   ========================================================= */

.vbm-light {
  /* Backgrounds */
  --vbm-bg-deep:     #f4f7fa;
  --vbm-bg-surface:  #ffffff;
  --vbm-bg-elevated: #e2e8f0;
  --vbm-bg-overlay:  rgba(255, 255, 255, 0.95);

  /* Text */
  --vbm-text-primary:   #1e293b;
  --vbm-text-secondary: #475569;
  --vbm-text-muted:     #94a3b8;

  /* Borders */
  --vbm-border:       rgba(15, 23, 42, 0.08);
  --vbm-border-strong: rgba(15, 23, 42, 0.12);

  /* Primary action color for light mode */
  --vbm-primary:      #2563eb;
  --vbm-primary-text: #ffffff;

  /* Accent text — white on colored accent buttons in light mode */
  --vbm-accent-text: #ffffff;

  /* Semantic colors — slightly darker for legibility on light bg */
  --vbm-success:    #16a34a;
  --vbm-success-bg: rgba(34, 197, 94, 0.1);

  --vbm-warning:    #d97706;
  --vbm-warning-bg: rgba(251, 191, 36, 0.1);

  --vbm-danger:     #dc2626;
  --vbm-danger-bg:  rgba(239, 68, 68, 0.08);

  --vbm-info:       #0284c7;
  --vbm-info-bg:    rgba(56, 189, 248, 0.1);

  --vbm-league:     #7c3aed;
  --vbm-league-bg:  rgba(139, 92, 246, 0.1);
}

/* Light-mode component adjustments */
.vbm-light .vbm-card,
.vbm-light .vbm-event-card,
.vbm-light .vbm-match-card,
.vbm-light .vbm-stat {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vbm-light .vbm-week-day {
  background: #ffffff;
}

.vbm-light .vbm-week-view {
  background: #e2e8f0;
}

.vbm-light .vbm-bottom-nav {
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.vbm-light .vbm-sticky-cta {
  background: rgba(255, 255, 255, 0.95);
}

.vbm-light .vbm-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}