/* ============================================================
   DESIGN: AURORA — premium, dark, glassmorphic, neon-glow.
   Great for football / esports. Derives a tinted-dark palette
   from the active theme hues.
   ============================================================ */

[data-design="aurora"]{
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  --bg:       hsl(var(--brand-h) 32% 5%);
  --bg-2:     hsl(var(--brand-h) 34% 8%);
  --surface:  hsl(var(--brand-h) 26% 11% / .68);
  --surface-2:hsl(var(--brand-h) 26% 16% / .80);
  --surface-3:hsl(var(--brand-h) 24% 22%);

  --text:     hsl(var(--brand-h) 36% 97%);
  --text-dim: hsl(var(--brand-h) 20% 74%);
  --text-mute:hsl(var(--brand-h) 14% 56%);

  --border:        hsl(var(--brand-h) 45% 82% / .12);
  --border-strong: hsl(var(--brand-h) 45% 82% / .24);

  --brand:        hsl(var(--brand-h) var(--brand-s) 64%);
  --brand-2:      hsl(var(--accent-h) var(--accent-s) 66%);
  --brand-soft:   hsl(var(--brand-h) var(--brand-s) 64% / .16);
  --brand-contrast: var(--brand-ink);
  --accent:       hsl(var(--accent-h) var(--accent-s) 66%);
  --accent-soft:  hsl(var(--accent-h) var(--accent-s) 66% / .18);

  --radius:20px; --radius-sm:13px; --radius-lg:28px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.45);
  --shadow:0 24px 60px -34px rgba(0,0,0,.85), inset 0 1px 0 hsl(var(--brand-h) 45% 90% / .06);
  --shadow-lg:0 50px 110px -50px rgba(0,0,0,.9), inset 0 1px 0 hsl(var(--brand-h) 45% 90% / .07);
  --glow:0 0 0 1px var(--brand-soft), 0 18px 50px -22px hsl(var(--brand-h) var(--brand-s) 50% / .55);

  --grad-brand:linear-gradient(135deg, var(--brand), var(--accent));
}

/* aurora glow background */
[data-design="aurora"] body{ background:var(--bg); }
[data-design="aurora"] .app-root{ position:relative; isolation:isolate; }
[data-design="aurora"] .app-root::before{
  content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 12% 8%,  hsl(var(--brand-h) var(--brand-s) 52% / .30), transparent 60%),
    radial-gradient(38vmax 38vmax at 88% 0%,  hsl(var(--accent-h) var(--accent-s) 54% / .26), transparent 60%),
    radial-gradient(50vmax 50vmax at 78% 96%, hsl(var(--brand-h) var(--brand-s) 46% / .22), transparent 62%),
    radial-gradient(40vmax 40vmax at 4% 100%, hsl(var(--accent-h) var(--accent-s) 50% / .18), transparent 60%);
  filter:saturate(1.15);
}

/* glass surfaces */
[data-design="aurora"] .card,
[data-design="aurora"] .panel,
[data-design="aurora"] .sidebar,
[data-design="aurora"] .topbar,
[data-design="aurora"] .match,
[data-design="aurora"] .auth__panel{
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  background:color-mix(in srgb, var(--surface) 82%, transparent);   /* follows light/dark mode */
  border:1px solid var(--border);
}
[data-design="aurora"] .card:hover{ border-color:var(--border-strong); }

[data-design="aurora"] .brand-mark{ box-shadow:var(--glow); }
[data-design="aurora"] .display-title{ background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent; }
/* On brand-gradient hero bands, the gradient-clipped title would be brand-on-brand
   (invisible). Force the solid contrast ink instead so it stays readable. */
[data-design="aurora"] .hero-band .display-title,
[data-design="aurora"] .promo__hero .display-title,
[data-design="aurora"] .promo__anon .display-title,
[data-design="aurora"] .promo__cta .display-title{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--brand-contrast);
}
[data-design="aurora"] .btn--primary{ box-shadow:0 14px 34px -16px hsl(var(--brand-h) var(--brand-s) 52% / .8); }
[data-design="aurora"] .nav__item.is-active{ box-shadow:inset 3px 0 0 var(--brand), 0 0 30px -18px hsl(var(--brand-h) var(--brand-s) 60% /.9); }
[data-design="aurora"] .stat__value{ background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent; }
[data-design="aurora"] .podium__step{ backdrop-filter:blur(10px); }