/* ==========================================================================
   BCM DESIGN SYSTEM — DESIGN TOKENS
   Bophuthatswana Civil Movement · Member Portal Enterprise Edition
   Do not hardcode raw colors/spacing anywhere else — reference these vars.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand palette (from master spec) ---- */
  --bcm-primary:        #1B3A5C;
  --bcm-primary-600:    #163049;
  --bcm-primary-100:    #E3EAF1;
  --bcm-secondary:      #2C5F8A;
  --bcm-accent-gold:    #E8871E;
  --bcm-orange:         #F7941D;
  --bcm-purple:         #5B4BDB;
  --bcm-slate:          #64748B;
  --bcm-bg:             #F5F7FA;

  /* Supplementary semantic colors (not in spec, needed for CRM-style states) */
  --bcm-success:        #1E9E6B;
  --bcm-danger:         #D64545;
  --bcm-teal:           #1AA3A3;
  --bcm-white:          #FFFFFF;
  --bcm-ink:            #1A2333;
  --bcm-ink-muted:      #5A6478;
  --bcm-border:         #E4E8EE;

  /* ---- Gradient library ----
     M61 — kept for anywhere a colored accent genuinely encodes
     status (a revoked card, a failed payment) — that's real
     information, not decoration. What changed: these are no longer
     applied uniformly across a row of identically-shaped KPI tiles
     (five different hues, one border-radius, one shadow, applied
     regardless of which number actually matters most — the
     "SaaS-card kit" pattern). See .bcm-stat-card--hero /
     .bcm-stat-card--quiet in bcm-components.css for the replacement:
     one number gets real weight, the rest go quiet. */
  --bcm-grad-blue:    linear-gradient(135deg, #1B3A5C 0%, #2C5F8A 100%);
  --bcm-grad-purple:  linear-gradient(135deg, #4B3BC9 0%, #7B6BF0 100%);
  --bcm-grad-orange:  linear-gradient(135deg, #E8871E 0%, #F7B733 100%);
  --bcm-grad-green:   linear-gradient(135deg, #14805A 0%, #1E9E6B 100%);
  --bcm-grad-red:     linear-gradient(135deg, #B23A3A 0%, #D64545 100%);
  --bcm-grad-teal:    linear-gradient(135deg, #12807F 0%, #1AA3A3 100%);
  --bcm-grad-gold:    linear-gradient(135deg, #E8871E 0%, #F5C56B 100%);

  /* ---- Typography ----
     M61 — "make this premium": Sora is a fine geometric sans, but it
     reads as generic startup-onboarding chrome regardless of what
     it's applied to — the exact opposite of what a civic movement's
     official portal should feel like. Source Serif 4 replaces it for
     display/headline use only (member names, hero numbers, screen
     titles) — an institutional, letterhead-grade serif, not a
     "premium luxury brand" cliché (Playfair Display and its
     relatives). Inter keeps doing the UI/body work it was already
     doing well; this is a single, deliberate axis of change, not a
     wholesale typeface swap. */
  --bcm-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bcm-font-body:    'Inter', 'Segoe UI', -apple-system, sans-serif;
  --bcm-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --bcm-fs-xs:   0.75rem;
  --bcm-fs-sm:   0.8125rem;
  --bcm-fs-base: 0.9375rem;
  --bcm-fs-md:   1.0625rem;
  --bcm-fs-lg:   1.25rem;
  --bcm-fs-xl:   1.625rem;
  --bcm-fs-2xl:  2rem;
  --bcm-fs-3xl:  2.5rem;

  /* ---- Spacing scale (4px base) ---- */
  --bcm-space-1: 0.25rem;
  --bcm-space-2: 0.5rem;
  --bcm-space-3: 0.75rem;
  --bcm-space-4: 1rem;
  --bcm-space-5: 1.5rem;
  --bcm-space-6: 2rem;
  --bcm-space-7: 2.5rem;
  --bcm-space-8: 3rem;

  /* ---- Radius ---- */
  --bcm-radius-sm:  8px;
  --bcm-radius-md:  14px;
  --bcm-radius-lg:  20px;
  --bcm-radius-pill: 999px;

  /* ---- Shadows (soft, layered — not the default Bootstrap box-shadow) ---- */
  --bcm-shadow-sm: 0 1px 2px rgba(27, 58, 92, 0.06), 0 1px 1px rgba(27, 58, 92, 0.04);
  --bcm-shadow-md: 0 4px 16px rgba(27, 58, 92, 0.08), 0 1px 3px rgba(27, 58, 92, 0.06);
  --bcm-shadow-lg: 0 12px 32px rgba(27, 58, 92, 0.12), 0 2px 6px rgba(27, 58, 92, 0.06);
  --bcm-shadow-glow-gold: 0 8px 24px rgba(232, 135, 30, 0.25);

  /* ---- Glass effect (used sparingly — hero banners, modals) ---- */
  --bcm-glass-bg: rgba(255, 255, 255, 0.72);
  --bcm-glass-border: rgba(255, 255, 255, 0.4);
  --bcm-glass-blur: 16px;

  /* ---- Motion ---- */
  --bcm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bcm-transition-fast: 140ms var(--bcm-ease);
  --bcm-transition-base: 220ms var(--bcm-ease);

  /* ---- Layout ---- */
  --bcm-sidebar-width: 264px;
  --bcm-sidebar-width-collapsed: 76px;
  --bcm-topbar-height: 68px;
  --bcm-logo-sidebar: 52px;
  --bcm-logo-sidebar-collapsed: 32px;
  --bcm-logo-login: 130px;
}

/* Dark mode token overrides (topbar toggle wires into this) */
[data-bcm-theme="dark"] {
  color-scheme: dark;
  --bcm-bg: #0F1720;
  --bcm-white: #17212E;
  --bcm-ink: #E9EDF3;
  --bcm-ink-muted: #94A1B5;
  --bcm-border: #26313F;
  --bcm-primary-100: #1C2A3A;
}