/* ============================================================
   Members Portal — design tokens
   ------------------------------------------------------------
   Hybrid theme model:
     - Dark surfaces for hero / chrome / community moments
     - Light surfaces for data density (tables, ladders, admin)
     - Member preference (`data-theme="dark|light|system"`) overrides

   Surface declaration on a section:  `data-surface="dark"` / `light`
   Each component reads the active surface and pulls the right tokens.

   Brand colour values (--brand-*) are deployment-specific. Defaults are
   set here as fallbacks; templates/head.php injects per-deployment
   overrides from config.brand.colours so each install paints its own.
   ============================================================ */

:root {
  /* ---- Brand (defaults — overridden per deployment via head.php) -- */
  --brand-primary:           #2EA544;     /* primary brand colour */
  --brand-action:            #E11D2A;     /* dominant CTA */
  --brand-secondary:         #F26F22;     /* secondary CTA */
  --brand-highlight:         #FFC629;     /* filter / highlight accent */

  /* Per-sport accent stripes — used in cards/headers (sport vocab is
     deployment-tunable; defaults below cover basketball + netball). */
  --sport-basketball:        #F26F22;
  --sport-netball:           #C2185B;

  /* ---- Type ---------------------------------------------------
     Display: Montserrat Black Italic (weight 900, italic) for
     hero wordmarks + pillar titles + section displays. Geometric
     athletic punch — reads like a sports magazine cover.
     Body:    Inter (400/500/600/700) for everything else —
     clean, neutral, optimised for UI text at all sizes.
     Both loaded via Google Fonts in templates/head.php. */
  --font-display: 'Montserrat', 'Bebas Neue', 'Anton', 'Impact', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-display: 96px;          /* editorial "Grind" moment */

  /* ---- Spacing (4px scale) ------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.18);

  /* ---- Z-layers ----------------------------------------------- */
  --z-ticker: 80;
  --z-nav:    90;
  --z-modal:  200;
  --z-toast:  300;

  /* ---- Status colours (semantic, surface-agnostic) ------------ */
  --st-pass:    #1F8A4C;
  --st-warn:    #C77600;
  --st-fail:    #C5252E;
  --st-info:    #1E6FB6;

  /* ---- Default surface = light. Sections override via [data-surface] */
  --surface-bg:        #FFFFFF;
  --surface-bg-elev:   #F8F9FB;
  --surface-bg-deep:   #EEF1F5;
  --surface-fg:        #0E1320;
  --surface-fg-muted:  #5C6573;
  --surface-fg-soft:   #8A91A0;
  --surface-border:    #DDE1E8;
  --surface-border-strong: #B7BDC8;
  --surface-link:      #1259A7;
  --surface-link-hover:#0A3F7B;
  --surface-cta-fg:    #FFFFFF;
}

/* ---- Dark surface ------------------------------------------------ */
[data-surface="dark"] {
  --surface-bg:        #0A0E1A;
  --surface-bg-elev:   #131828;
  --surface-bg-deep:   #1B2238;
  --surface-fg:        #F1F3F8;
  --surface-fg-muted:  #B5BCCC;
  --surface-fg-soft:   #79829A;
  --surface-border:    #283050;
  --surface-border-strong: #3A446A;
  --surface-link:      #79B6FF;
  --surface-link-hover:#A8CDFF;
  --surface-cta-fg:    #FFFFFF;
}

/* ---- Light surface (explicit override) -------------------------- */
[data-surface="light"] {
  --surface-bg:        #FFFFFF;
  --surface-bg-elev:   #F8F9FB;
  --surface-bg-deep:   #EEF1F5;
  --surface-fg:        #0E1320;
  --surface-fg-muted:  #5C6573;
  --surface-fg-soft:   #8A91A0;
  --surface-border:    #DDE1E8;
  --surface-border-strong: #B7BDC8;
  --surface-link:      #1259A7;
  --surface-link-hover:#0A3F7B;
  --surface-cta-fg:    #FFFFFF;
}

/* ---- Member theme preference overrides --------------------------
   `data-theme="dark"` forces dark on every surface (a "dark stats" mode).
   `data-theme="light"` forces light on every surface.
   `data-theme="system"` (default) follows the per-section data-surface.
   ----------------------------------------------------------------- */
[data-theme="dark"] [data-surface] {
  --surface-bg:        #0A0E1A;
  --surface-bg-elev:   #131828;
  --surface-bg-deep:   #1B2238;
  --surface-fg:        #F1F3F8;
  --surface-fg-muted:  #B5BCCC;
  --surface-fg-soft:   #79829A;
  --surface-border:    #283050;
  --surface-border-strong: #3A446A;
  --surface-link:      #79B6FF;
  --surface-link-hover:#A8CDFF;
}

[data-theme="light"] [data-surface] {
  --surface-bg:        #FFFFFF;
  --surface-bg-elev:   #F8F9FB;
  --surface-bg-deep:   #EEF1F5;
  --surface-fg:        #0E1320;
  --surface-fg-muted:  #5C6573;
  --surface-fg-soft:   #8A91A0;
  --surface-border:    #DDE1E8;
  --surface-border-strong: #B7BDC8;
  --surface-link:      #1259A7;
  --surface-link-hover:#0A3F7B;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}