/* ==========================================================================
   Rowgear Brain - tokens.css  (copy of docs/brand/tokens.css; a test keeps them identical below this header)
   Load ONCE, before css/site.css and after MudBlazor.min.css:  <link href="css/tokens.css" rel="stylesheet" />
   Then delete every per-page `:root { --rowgear-* }` block (Home, Brain/Hub/LiveOps, ProfileSettings, Map).
   Zero-risk adoption: all existing names (--rowgear-*, --glass-*, --executive-*, --brain-*) are kept as aliases.
   Decisions baked in (see BRAND.md section 0):
     D1 accent = #F5B83B (amber); #FFA500 only as --rowgear-glow-amber for ambient washes
     D2 Poppins 300-800 loaded; 900 is not used; Ethnocentric is single-weight
     D3 light is the canonical look; dark is a supported theme via .mud-theme-dark (class also on <html>)
     D4 one place for tokens; no new global <style> blocks
     D5 calendar purple/teal/coral retire to brand-sweep / sky / amber
     D6 prefers-reduced-motion is honoured globally (bottom of file)
   ========================================================================== */
:root {
  /* ---------- Brand: red ---------- */
  --rowgear-primary:          #C3000F;           /* site.css:33, Mud Primary */
  --rowgear-primary-rgb:      195, 0, 15;        /* Hub/Brain :12 */
  --rowgear-primary-mid:      #AA000D;           /* Mud AppbarBackground; folds #A5000D, #A1000D */
  --rowgear-primary-mid-rgb:  170, 0, 13;
  --rowgear-primary-dark:     #8B0000;
  --rowgear-primary-dark-rgb: 139, 0, 0;
  --rowgear-primary-deep:     #7D0008;           /* rg-hero end stop */
  --rowgear-primary-light:    #E63946;           /* declared, unused today */
  --rowgear-primary-tint:     rgba(var(--rowgear-primary-rgb), 0.12);  /* chips, pills */
  --rowgear-primary-wash:     rgba(var(--rowgear-primary-rgb), 0.08);  /* page glow */

  /* ---------- Brand: blue ---------- */
  --rowgear-secondary:        #5ba9dd;
  --rowgear-secondary-rgb:    91, 169, 221;
  --rowgear-secondary-600:    #469ed9;           /* drawer mid; folds #4a90c2 */
  --rowgear-secondary-700:    #4a8dbd;           /* drawer end, SecondaryDarken; folds #3b7ba8 */
  --rowgear-secondary-tint:   #e6f3fa;           /* Mud SecondaryLighten */
  --rowgear-secondary-dark-mode: #92c6e8;        /* PaletteDark secondary */
  --rowgear-secondary-ink:    #256a97;           /* NEW: blue for TEXT/links on white (5.85:1). #5ba9dd text is 2.57:1 - fails AA */
  --rowgear-primary-on-dark:  #E63946;           /* red graphics/borders on #1e1e1e (4.0:1); red TEXT on dark = #FF6B6B (6.0:1) */
  --rowgear-primary-text-on-dark: #FF6B6B;

  /* ---------- Brand: accent ---------- */
  --rowgear-accent:           #F5B83B;           /* site.css:36 (canonical; pages that said #FFA500 / #5ba9dd migrate) */
  --rowgear-accent-rgb:       245, 184, 59;
  --rowgear-glow-amber:       #FFA500;           /* ambient radial washes only */
  --rowgear-glow-amber-rgb:   255, 165, 0;

  /* ---------- Neutrals: slate (glass UI) ---------- */
  --slate-50:  #f8fafc;  --slate-100: #f1f5f9;  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;  --slate-400: #94a3b8;  --slate-500: #64748b;
  --slate-900: #0f172a;  --slate-950: #111827;
  --ink-rgb:   15, 23, 42;                       /* shadow / dark-glass base (slate-900) */
  --ink-dark-panel-rgb: 20, 26, 40;              /* dark panels: folds 18,24,38 / 26,34,50 / 30,40,60 */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* ---------- Neutrals: Mud (match the C# theme; do not diverge) ---------- */
  --rowgear-text-secondary: #6c757d;   /* PaletteLight.TextSecondary */
  --rowgear-divider:        #e9ecef;   /* PaletteLight.Divider */

  /* ---------- Semantic text/surface (follow light/dark via Mud) ---------- */
  --rg-bg:          var(--mud-palette-background);
  --rg-surface:     var(--mud-palette-surface);
  --rg-text:        var(--mud-palette-text-primary);
  --rg-text-muted:  var(--mud-palette-text-secondary);
  --rg-border:      var(--mud-palette-divider);

  /* ---------- Status ---------- */
  --status-success: #2e7d32;  --status-success-rgb: 76, 175, 80;   --status-success-tint: #e8f5e8;
  --status-warning: #ef6c00;  --status-warning-rgb: 245, 184, 59;  --status-warning-tint: #fff3e0;
  --status-warning-text-on-amber: #b37500;                         /* Clients segment/status */
  --status-error:   #c62828;  --status-error-rgb: 198, 40, 40;     --status-error-tint: #ffebee;
  --status-info:    #1565c0;  --status-info-rgb: 33, 150, 243;     --status-info-tint: #e3f2fd;
  /* text-safe variants (>= 4.5:1 on white and on the tint): use these for TEXT, the base colour for icons/bars/borders */
  --status-warning-text: #b45309;   /* 5.02:1 on #fff, 4.58:1 on #fff3e0. #ef6c00 text is only 3.08:1 - never for text */
  --status-warning-on-amber: #8a5a00; /* text on amber tint (replaces #b37500, 3.85:1) 5.93:1 on white */
  --status-neutral: #616161;  --status-neutral-rgb: 158, 158, 158;

  /* ---------- Map ---------- */
  --map-region-base:    #e2e8f0;
  --map-coverage-1:     #f1cfd2;   /* 30% */
  --map-coverage-2:     #e59ba1;   /* 55% */
  --map-coverage-3:     #d45f60;   /* 75% */
  --map-coverage-4:     #c3000f;   /* 100% */
  --map-selection:      #b91c1c;
  --map-hover-rgb:      91, 169, 221;
  --map-label:          #f8fafc;   --map-label-halo: rgba(15, 23, 42, 0.65);
  --venue-school: #2b6cb0;  --venue-university: #2a9d8f;  --venue-club: #c2410c;
  --venue-hyrox:  #d97706;  --venue-crossfit:   #be123c;  --venue-private: #0f766e;
  --venue-pt:     #2563eb;  --venue-chain:      #6d28d9;  --venue-other:   #64748b;

  /* ---------- Decorative (kept for Brain SVG / AI orb; do not reuse elsewhere) ---------- */
  --brain-pink: #FFB6C1;  --brain-coral: #FF7F7F;  --brain-purple: #DDA0DD;  --brain-blue: #87CEEB;
  --brain-teal: #48D1CC;  --brain-green: #90EE90;  --brain-yellow: #FFFFE0;  --brain-orange: #FFA07A;
  --neural-navy: #1e3a8a;  --neural-blue: #3b82f6;  --neural-glass-rgb: 15, 29, 69;
  --ai-cyan: #00d4ff;      --ai-cyan-deep: #0066cc;

  /* ---------- Gradients ---------- */
  --grad-brand-sweep: linear-gradient(135deg, var(--rowgear-primary) 0%, var(--rowgear-primary-mid) 50%, var(--rowgear-primary-dark) 100%);
  --grad-brand-hero:  linear-gradient(135deg, var(--rowgear-primary) 0%, var(--rowgear-primary-dark) 100%);
  --grad-rg-hero:     linear-gradient(135deg, var(--rowgear-primary) 0%, var(--rowgear-primary-mid) 55%, var(--rowgear-primary-deep) 100%);
  --grad-sky-drawer:  linear-gradient(180deg, var(--rowgear-secondary) 0%, var(--rowgear-secondary-600) 50%, var(--rowgear-secondary-700) 100%);
  --grad-sky-menu:    linear-gradient(135deg, var(--rowgear-secondary) 0%, var(--rowgear-secondary-600) 50%, var(--rowgear-secondary-700) 100%);
  --grad-sky-login:   linear-gradient(135deg, var(--rowgear-secondary) 0%, #4a90c2 50%, #3b7ba8 100%);   /* auth pages only */
  --grad-progress-bar: var(--grad-progress);
  --grad-tricolour:   linear-gradient(90deg, var(--rowgear-primary), var(--rowgear-secondary), var(--rowgear-accent), var(--rowgear-primary));
  --grad-progress:    linear-gradient(90deg, var(--rowgear-primary), var(--rowgear-secondary));
  --grad-sheen:       linear-gradient(45deg, rgba(var(--white-rgb), .10) 0%, transparent 50%, rgba(var(--white-rgb), .05) 100%);
  --grad-glass-fill:  linear-gradient(135deg, rgba(var(--white-rgb), .15) 0%, rgba(var(--white-rgb), .05) 100%);
  --grad-glass-fill-hover: linear-gradient(135deg, rgba(var(--white-rgb), .25) 0%, rgba(var(--white-rgb), .15) 100%);
  --grad-sweep:       linear-gradient(90deg, transparent, rgba(var(--white-rgb), .20), transparent); /* slide left:-100% -> 100% */
  --grad-white-glass: linear-gradient(135deg, rgba(var(--white-rgb), .95) 0%, rgba(var(--white-rgb), .85) 100%);
  --grad-navy-glass:  linear-gradient(135deg, rgba(var(--neural-glass-rgb), .65) 0%, rgba(var(--neural-glass-rgb), .55) 50%, rgba(var(--neural-glass-rgb), .45) 100%);
  --grad-hero-orb:    radial-gradient(circle, rgba(var(--white-rgb), .20) 0%, transparent 70%);
  --grad-kpi-corner:  radial-gradient(circle, rgba(var(--rowgear-primary-rgb), .16) 0%, transparent 70%);
  --grad-aurora-edge: linear-gradient(90deg, transparent 0%, rgba(var(--rowgear-secondary-rgb), .6) 25%, rgba(var(--rowgear-primary-rgb), .8) 50%, rgba(var(--rowgear-glow-amber-rgb), .6) 75%, transparent 100%);
  --grad-hero-glow-light:
      radial-gradient(circle at 20% 10%, rgba(var(--rowgear-primary-rgb), .08) 0%, transparent 45%),
      radial-gradient(circle at 75% 20%, rgba(var(--rowgear-secondary-rgb), .08) 0%, transparent 45%),
      radial-gradient(circle at 75% 75%, rgba(var(--rowgear-accent-rgb), .08) 0%, transparent 40%);   /* site.css:46-49, 277-278 */
  --grad-hero-glow-dark:
      radial-gradient(circle at 15% 25%, rgba(var(--rowgear-secondary-rgb), .14) 0%, transparent 45%),
      radial-gradient(circle at 75% 15%, rgba(var(--rowgear-primary-rgb), .16) 0%, transparent 45%),
      radial-gradient(circle at 60% 80%, rgba(var(--rowgear-accent-rgb), .10) 0%, transparent 45%);   /* site.css:53-56 */

  /* ---------- Glass ---------- */
  --blur-sm: 10px;  --blur-md: 20px;  --blur-lg: 30px;  --glass-saturate: saturate(160%);
  --glass-light-bg:      rgba(var(--white-rgb), .86);     /* rg-panel */
  --glass-light-bg-thin: rgba(var(--white-rgb), .70);     /* --executive-glass */
  --glass-light-border:  rgba(var(--white-rgb), .60);     /* --executive-border */
  --glass-on-color-bg:     rgba(var(--white-rgb), .14);   /* rg-hero-stat .16, hero-stat .12 */
  --glass-on-color-border: rgba(var(--white-rgb), .28);
  --glass-dark-bg:       rgba(var(--ink-dark-panel-rgb), .75);
  --glass-dark-border:   rgba(var(--white-rgb), .12);
  --glass-brand-border:  rgba(var(--rowgear-primary-rgb), .16);
  /* existing names, kept: */
  --executive-glass:  var(--glass-light-bg-thin);
  --executive-border: var(--glass-light-border);
  --executive-shadow: var(--shadow-xl-soft);
  --glass-bg:         linear-gradient(135deg, rgba(var(--white-rgb), .95), rgba(var(--white-rgb), .82));
  --glass-border:     var(--glass-brand-border);
  --glass-shadow:     0 18px 40px rgba(var(--ink-rgb), .14), inset 0 0 0 1px rgba(var(--white-rgb), .45);

  /* ---------- Elevation ---------- */
  --shadow-xs:  0 1px 2px rgba(var(--black-rgb), .10);
  --shadow-sm:  0 2px 12px rgba(var(--black-rgb), .06);
  --shadow-md:  0 8px 32px rgba(var(--black-rgb), .10), inset 0 2px 0 rgba(var(--rowgear-primary-rgb), .10);
  --shadow-lg:  0 18px 40px rgba(12, 20, 40, .12);
  --shadow-xl:  0 24px 60px rgba(var(--black-rgb), .15);
  --shadow-xl-soft: 0 20px 50px rgba(13, 18, 30, .12);
  --shadow-lift: 0 20px 60px rgba(var(--black-rgb), .15), inset 0 4px 0 rgba(var(--rowgear-primary-rgb), .30);
  --shadow-dark: 0 24px 60px rgba(var(--black-rgb), .35);
  --glow-brand:  0 4px 20px rgba(var(--rowgear-primary-rgb), .40), 0 8px 40px rgba(var(--rowgear-primary-mid-rgb), .20);
  --glow-hero:   0 24px 60px rgba(var(--rowgear-primary-rgb), .35);
  --glow-sky:    4px 0 20px rgba(var(--rowgear-secondary-rgb), .30), 8px 0 40px rgba(70, 158, 217, .20);
  --glow-ai:     0 0 20px rgba(0, 212, 255, .5);
  --inset-highlight: inset 0 1px 0 rgba(var(--white-rgb), .60);

  /* ---------- Typography ---------- */
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Ethnocentric', 'Poppins', sans-serif;   /* self-hosted wwwroot/fonts */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-extrabold: 800;
  /* D2: App.razor must request  Poppins:wght@300;400;500;600;700;800  (today it stops at 700, so every 800 is faux-bold). 900 is retired: cap at 800. */

  --text-micro:   0.65rem;   /* floor for decorative badges; never below 0.65rem for readable text */
  --text-xs:      0.7rem;
  --text-sm:      0.75rem;   /* chips, status badges */
  --text-md:      0.85rem;   /* captions, panel subtitle, labels */
  --text-base:    1rem;
  --text-lg:      1.1rem;    /* panel/section title */
  --text-xl:      1.5rem;
  --text-kpi:     2rem;      /* numeric KPI */
  --text-display-xl: clamp(2.5rem, 8vw, 4.5rem);   /* brain-title */
  --text-display:    clamp(2.5rem, 7vw, 4rem);     /* home hero */
  --text-h1:         clamp(2.1rem, 3.2vw, 3rem);   /* rg-hero-title */
  --text-hero-stat:  clamp(1.8rem, 4vw, 2.2rem);

  --lh-tight: 1;  --lh-snug: 1.2;  --lh-normal: 1.5;  --lh-relaxed: 1.6;

  --tracking-display: -0.03em;  --tracking-tight: -0.02em;
  --tracking-label:   0.08em;   --tracking-wide: 0.12em;
  --tracking-eyebrow: 0.2em;    --tracking-eyebrow-hero: 0.35em;   /* executive vs rg-hero */
  --tracking-wordmark: 2px;     /* .ethnocentric */

  /* ---------- Spacing (0.25rem grain) ---------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --page-pad-y: 1.75rem;  --page-pad-x: 2.25rem;  --page-pad-bottom: 3rem;     /* rg-page */
  --page-gap: 1.75rem;    --grid-gap: 1.5rem;     --kpi-gap: 1.25rem;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;
  --radius-xl: 22px; /* rg-panel, rg-hero, executive-panel */
  --radius-2xl: 24px; /* prompter, floating inputs */
  --radius-pill: 999px;  --radius-round: 50%;

  /* ---------- Borders ---------- */
  --border-hair: 1px;  --border-accent: 4px;

  /* ---------- Layout ---------- */
  --appbar-height: 80px;
  --drawer-width: 260px;          /* keep in sync with Mud DrawerWidthLeft */
  --drawer-top: var(--appbar-height);
  --breadcrumb-height: 50px;
  --container-narrow: 450px;      /* login */
  --container-prose: 620px;       /* hero/executive subtitle */
  --container-prompter: 700px;
  --container-timeline: 900px;
  --container-page: 1400px;       /* legacy Home container; rg-page is fluid */
  --grid-min-card: 320px;  --grid-min-kpi: 220px;  --grid-min-stat: 140px;

  /* ---------- Breakpoints (reference only: custom properties cannot be used in @media) ----------
     sm 600  | md 768 | lg 960 | xl 1100 | 2xl 1200   (existing: 480, 600, 640, 700, 768, 960, 1100, 1200) */

  /* ---------- Z-index ---------- */
  --z-behind: -1;  --z-base: 0;  --z-raised: 2;  --z-overlay-map: 10;
  --z-sticky: 100; --z-error-ui: 1000;  --z-appbar: 1300;  --z-modal: 2000;
  /* MudBlazor popovers/dialogs/snackbars take --mud-zindex-* (set at runtime by MudThemeProvider). Popovers MUST render above --z-appbar. */

  /* ---------- Motion ---------- */
  --dur-instant: 120ms;  --dur-fast: 200ms;  --dur-base: 300ms;  --dur-slow: 400ms;
  --dur-sweep: 600ms;    --dur-enter: 600ms;
  --dur-ambient-s: 4s;   --dur-ambient-m: 6s;   --dur-ambient-l: 20s;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.23, 1, .32, 1);
  --ease-spring:   cubic-bezier(.175, .885, .32, 1.275);
  --transition-ui: all var(--dur-fast) ease;                      /* nav, chips, breadcrumb */
  --transition-lift: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;   /* rg-list-item */
  --transition-card: all var(--dur-slow) var(--ease-standard);    /* glass-card, prompter */
  --lift-sm: translateY(-2px);  --lift-md: translateY(-4px);  --lift-lg: translateY(-6px) scale(1.02);
  --stagger-step: 100ms;
}

/* ---------- Dark theme (D3) ----------
   MudBlazor sets --mud-palette-* itself. Put the class on <html> as well as MudLayout so popovers/dialogs inherit.  */
.mud-theme-dark, :root[data-theme="dark"] {
  --glass-light-bg:      var(--glass-dark-bg);
  --glass-light-bg-thin: var(--glass-dark-bg);
  --glass-light-border:  var(--glass-dark-border);
  --executive-shadow:    var(--shadow-dark);
  --grad-hero-glow-light: var(--grad-hero-glow-dark);
  --rowgear-secondary:   var(--rowgear-secondary-dark-mode);
  --rowgear-secondary-ink: var(--rowgear-secondary-dark-mode);
  --rg-panel-text-muted: rgba(255, 255, 255, .65);
  --status-success-tint: rgba(76, 175, 80, .18);
  --status-warning-tint: rgba(239, 108, 0, .20);
  --status-error-tint:   rgba(198, 40, 40, .22);
  --status-info-tint:    rgba(33, 150, 243, .18);
  --status-warning-text: #ffb74d;
}

/* ---------- Component-level semantic aliases (what RgXxx components consume) ---------- */
:root {
  --rg-panel-bg:      var(--glass-light-bg);
  --rg-panel-border:  rgba(var(--white-rgb), .80);
  --rg-panel-radius:  var(--radius-xl);
  --rg-panel-shadow:  var(--shadow-lg);
  --rg-panel-blur:    blur(18px);
  --rg-panel-text-muted: rgba(0, 0, 0, .60);
  --rg-focus-ring:    0 0 0 2px var(--mud-palette-background, #fff), 0 0 0 4px var(--rowgear-primary);   /* NEW: brand focus ring replaces template #258cfb */
  --rg-focus-ring-on-color: 0 0 0 2px var(--rowgear-primary-dark), 0 0 0 4px #fff;
}

/* ---------- Reduced motion (D6) ----------
   Keeps layout and colour feedback; removes movement, ambient loops, sweeps and entrance travel. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-sweep: 1ms; --dur-enter: 1ms;
          --lift-sm: none; --lift-md: none; --lift-lg: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ECharts theme: see echarts-theme.json (register once as "rowgear"). Series order mirrors --rowgear-primary, -secondary, -accent, then --venue-*. */