/* ==========================================================================
   Material Design 3 — Design Tokens
   GamesZone BD — Dark-Blue theme. Single theme, dark-only (no light
   variant, no OS-preference switching): a deep navy/near-black surface
   family with a vivid azure-blue primary accent, refined shape scale
   (slightly softer/larger radii) and blue-tinted elevation shadows for a
   premium, esports-tournament feel. Every page/component reads these same
   custom properties, so this file is the single source of the app's whole
   visual identity — component-level CSS (m3-components.css/m3-admin.css)
   only adds structural refinements on top of it, never its own colours;
   any accent glow there reads --md-glow-rgb rather than a hardcoded hue,
   so a future recolor (like this one, replacing the earlier Dark-Purple
   theme) only ever needs to change this one file.
   ========================================================================== */

:root {
  /* ---- Colour roles ---- */
  --md-primary: #3b82f6;
  --md-on-primary: #ffffff;
  --md-primary-container: #1e3a8a;
  --md-on-primary-container: #dbe6fe;

  --md-secondary: #b8c9e0;
  --md-on-secondary: #253147;
  --md-secondary-container: #35405c;
  --md-on-secondary-container: #dce6fb;

  --md-tertiary: #38bdf8;
  --md-on-tertiary: #06304a;
  --md-tertiary-container: #0c4a6e;
  --md-on-tertiary-container: #d3f0ff;

  --md-error: #ff8a80;
  --md-on-error: #4a0e0a;
  --md-error-container: #7a1f18;
  --md-on-error-container: #ffdad4;

  --md-success: #4ade80;
  --md-on-success: #06341a;
  --md-success-container: #14532d;
  --md-on-success-container: #bbf7d0;

  --md-warning: #fbbf24;
  --md-on-warning: #422c00;
  --md-warning-container: #5c3f00;
  --md-on-warning-container: #ffe9b3;

  --md-background: #0a1128;
  --md-on-background: #e8edf7;

  --md-surface: #0a1128;
  --md-on-surface: #e8edf7;
  --md-surface-variant: #2c3b5e;
  --md-on-surface-variant: #c1cbe0;

  --md-surface-dim: #070c1c;
  --md-surface-bright: #1c2a4a;
  --md-surface-container-lowest: #05070f;
  --md-surface-container-low: #0e1730;
  --md-surface-container: #101a35;
  --md-surface-container-high: #182444;
  --md-surface-container-highest: #202e52;

  --md-outline: #7a8bb3;
  --md-outline-variant: #2c3b5e;

  /* The app is dark-only now, so the "inverse" surface (snackbars) is
     deliberately the one LIGHT chip in the whole UI — it should read as a
     distinct pop-up, not blend into the page. */
  --md-inverse-surface: #e8edf7;
  --md-inverse-on-surface: #101a35;
  --md-inverse-primary: #1d4ed8;
  --md-inverse-error: #b3261e;
  --md-inverse-success: #146c2e;
  --md-inverse-warning: #7d5800;

  --md-shadow: #000000;
  --md-scrim: #000000;

  /* Accent-glow colour, as bare R,G,B channels (not a full rgb()/hex
     value) so component CSS can compose `rgba(var(--md-glow-rgb), X)` at
     whatever alpha it needs — button hover glow, focus rings, active-nav
     glow, elevation tint, etc. all read this one variable, so a future
     re-theme (hue swap) only ever touches this file. Matches --md-primary. */
  --md-glow-rgb: 59, 130, 246;

  /* ---- State layer opacities (M3 spec) ---- */
  --md-state-hover: 0.08;
  --md-state-focus: 0.10;
  --md-state-pressed: 0.10;
  --md-state-dragged: 0.16;
  --md-state-disabled-content: 0.38;
  --md-state-disabled-container: 0.12;

  /* ---- Shape scale ---- */
  --md-shape-none: 0;
  --md-shape-xs: 6px;
  --md-shape-sm: 10px;
  --md-shape-md: 16px;
  --md-shape-lg: 22px;
  --md-shape-xl: 32px;
  --md-shape-full: 9999px;

  /* ---- Elevation (M3 levels 0–5) — blue-black tinted glow instead of a
     flat black shadow, the signature "premium dark" touch. ---- */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px 0 rgba(var(--md-glow-rgb), .35), 0 1px 3px 1px rgba(0, 0, 0, .4);
  --md-elevation-2: 0 2px 4px 0 rgba(var(--md-glow-rgb), .35), 0 2px 8px 2px rgba(0, 0, 0, .4);
  --md-elevation-3: 0 4px 10px 3px rgba(var(--md-glow-rgb), .3), 0 2px 4px 0 rgba(0, 0, 0, .45);
  --md-elevation-4: 0 6px 14px 4px rgba(var(--md-glow-rgb), .3), 0 2px 6px 0 rgba(0, 0, 0, .45);
  --md-elevation-5: 0 10px 18px 6px rgba(var(--md-glow-rgb), .3), 0 4px 8px 0 rgba(0, 0, 0, .5);

  /* ---- Typography: Roboto, the Material type family ---- */
  --md-font: Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-font-brand: Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale: size / line-height / weight / tracking */
  --md-display-large: 400 57px/64px var(--md-font);
  --md-display-medium: 400 45px/52px var(--md-font);
  --md-display-small: 400 36px/44px var(--md-font);
  --md-headline-large: 400 32px/40px var(--md-font);
  --md-headline-medium: 400 28px/36px var(--md-font);
  --md-headline-small: 400 24px/32px var(--md-font);
  --md-title-large: 400 22px/28px var(--md-font);
  --md-title-medium: 500 16px/24px var(--md-font);
  --md-title-small: 500 14px/20px var(--md-font);
  --md-body-large: 400 16px/24px var(--md-font);
  --md-body-medium: 400 14px/20px var(--md-font);
  --md-body-small: 400 12px/16px var(--md-font);
  --md-label-large: 500 14px/20px var(--md-font);
  --md-label-medium: 500 12px/16px var(--md-font);
  --md-label-small: 500 11px/16px var(--md-font);

  /* ---- Motion (M3 easing + duration) ---- */
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-duration-short: 100ms;
  --md-duration-medium: 200ms;
  --md-duration-long: 350ms;

  /* ---- Layout ---- */
  --md-top-app-bar-height: 64px;
  --md-nav-bar-height: 80px;

  /* Single theme, dark-only — tells the UA so form controls/scrollbars
     match, regardless of the OS's own light/dark preference. */
  color-scheme: dark;
}