/* ============================================================
   CSS VARIABLES - Portal Dashboard
   ============================================================ */

:root {
  --espn-blue: #2563eb;
  --header-bg: #ffffff;
  --whitish-blue: #eff4fb;
  --accent-red: #e63946;
  --logo-box-bg: #ffffff;
  --logo-primary-text: #1e293b;
  --logo-accent-text: #2563eb;
  --accent-gold: #f4b400;
  --accent-gold-dark: #db8a00;
  --yell: #ffd447;
  --menu-font-family: 'Assistant', sans-serif;
  --menu-text-color: #2f3b4a;
  --menu-active-text-color: #ffffff;
  --menu-active-border-color: #2563eb;
  --menu-active-bg: #2563eb;
  --menu-font-weight: 500;

  --bg: #eef1f7;
  --surface: #ffffff;
  --surface2: #f6f8fb;
  --border: #e6eaf0;
  --border2: #d8e0ea;
  --text: #1f2937;
  --text2: #526173;
  --text3: #6b7b8f;

  --shadow: rgba(40, 53, 73, 0.08);
  --shadow2: rgba(40, 53, 73, 0.12);
  --shadow3: rgba(40, 53, 73, 0.18);

  --footer-bg: #ffffff;
  --footer-border: #dfe5ec;
  --footer-text: #607082;
  --sidebar-placeholder: #e9edf2;

  --cricket-red: #ef4444;
  --cricket-blue: #2563eb;
  --cricket-gray: #728196;
}

[data-theme="dark"] {
  --header-bg: #131a26;
  --logo-box-bg: #182031;
  --logo-primary-text: #f7f9fc;
  --logo-accent-text: #7ab7ff;
  --menu-text-color: #b4bfd1;
  --menu-active-text-color: #ffffff;
  --menu-active-border-color: #7ab7ff;
  --menu-active-bg: rgba(122, 183, 255, 0.1);

  --bg: #0d121b;
  --surface: #161e2b;
  --surface2: #1a2434;
  --border: #253145;
  --border2: #334359;
  --text: #f1f5f9;
  --text2: #b1bccd;
  --text3: #8694a8;
  --shadow: rgba(0,0,0,0.26);
  --shadow2: rgba(0,0,0,0.38);
  --shadow3: rgba(0,0,0,0.52);
  --footer-bg: #131a26;
  --footer-border: #253145;
  --footer-text: #92a1b5;
  --sidebar-placeholder: #253145;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background:
    radial-gradient(circle at top center, rgba(147, 161, 183, 0.28), transparent 32%),
    linear-gradient(180deg, #dfe3ea 0%, var(--bg) 220px);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}