@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* ───────────────────────────────────────────────────────────
   Shared Design Tokens & Base Styles
   Used by: team-dashboard.html, dashboard.html, index.html
   ─────────────────────────────────────────────────────────── */

:root {
  /* Brand Colors */
  --prime: #00f2fe;
  --accent: #ff0574;
  --green: #4ade80;
  --yellow: #facc15;
  --red: #ef4444;
  --gray: #6b7280;

  /* Semantic Variables – Dark Mode (Default) */
  --bg-body: #0d0d1a;
  --bg-gradient-start: rgba(0, 242, 254, 0.1);
  --bg-gradient-end: rgba(255, 5, 116, 0.08);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-card-backdrop: blur(10px);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-header: rgba(255, 255, 255, 0.6);
  --text-label: rgba(255, 255, 255, 0.5);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --tab-bg: rgba(255, 255, 255, 0.1);
  --tab-active-bg: #ffffff;
  --tab-active-text: #0d0d1a;
  --chart-bg-stroke: rgba(255, 255, 255, 0.1);
  --scale-item-bg: rgba(255, 255, 255, 0.1);
  --scale-item-text: rgba(255, 255, 255, 0.5);
  --hamburger-bg: rgba(13, 13, 26, 0.8);
  --menu-bg: rgba(13, 13, 26, 0.95);
  --menu-hover: rgba(255, 255, 255, 0.1);
  --alert-bg: rgba(239, 68, 68, 0.15);
  --alert-border: rgba(239, 68, 68, 0.3);
  --arc-track-stroke: rgba(255, 255, 255, 0.07);
  --arc-fill-glow-opacity: 1;
  --indicator-bg: rgba(255, 255, 255, 0.04);
  --indicator-border: rgba(255, 255, 255, 0.06);
  --indicator-bg-lg: rgba(255, 255, 255, 0.04);
  --indicator-border-lg: rgba(255, 255, 255, 0.1);
  --indicator-primary-bg: rgba(255, 255, 255, 0.03);
}

@media (prefers-color-scheme: light) {
  :root {
    /* Semantic Variables – Light Mode */
    --bg-body: #f8fafc;
    --bg-gradient-start: rgba(0, 242, 254, 0.05);
    --bg-gradient-end: rgba(255, 5, 116, 0.05);
    --bg-card: rgba(255, 255, 255, 0.6);
    --bg-card-hover: rgba(255, 255, 255, 0.9);
    --bg-card-backdrop: blur(20px);
    --border-color: rgba(148, 163, 184, 0.2);
    --border-hover: rgba(0, 242, 254, 0.3);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-secondary: #334155;
    --text-header: #475569;
    --text-label: #94a3b8;
    --input-bg: #ffffff;
    --input-border: rgba(148, 163, 184, 0.3);
    --tab-bg: rgba(148, 163, 184, 0.2);
    --tab-active-bg: #0f172a;
    --tab-active-text: #ffffff;
    --chart-bg-stroke: rgba(148, 163, 184, 0.2);
    --scale-item-bg: rgba(148, 163, 184, 0.1);
    --scale-item-text: #94a3b8;
    --hamburger-bg: rgba(255, 255, 255, 0.8);
    --menu-bg: rgba(255, 255, 255, 0.95);
    --menu-hover: rgba(148, 163, 184, 0.1);
    --alert-bg: rgba(254, 226, 226, 0.5);
    --alert-border: rgba(239, 68, 68, 0.2);
    --arc-track-stroke: rgba(100, 116, 139, 0.3);
    --arc-fill-glow-opacity: 0.6;
    --indicator-bg: rgba(100, 116, 139, 0.08);
    --indicator-border: rgba(100, 116, 139, 0.18);
    --indicator-bg-lg: rgba(100, 116, 139, 0.08);
    --indicator-border-lg: rgba(100, 116, 139, 0.25);
    --indicator-primary-bg: rgba(100, 116, 139, 0.06);
  }
}

/* Force Light Mode */
:root.light-mode {
  --bg-body: #f8fafc;
  --bg-gradient-start: rgba(0, 242, 254, 0.05);
  --bg-gradient-end: rgba(255, 5, 116, 0.05);
  --bg-card: rgba(255, 255, 255, 0.6);
  --bg-card-hover: rgba(255, 255, 255, 0.9);
  --bg-card-backdrop: blur(20px);
  --border-color: rgba(148, 163, 184, 0.2);
  --border-hover: rgba(0, 242, 254, 0.3);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-secondary: #334155;
  --text-header: #475569;
  --text-label: #94a3b8;
  --input-bg: #ffffff;
  --input-border: rgba(148, 163, 184, 0.3);
  --tab-bg: rgba(148, 163, 184, 0.2);
  --tab-active-bg: #0f172a;
  --tab-active-text: #ffffff;
  --chart-bg-stroke: rgba(148, 163, 184, 0.2);
  --scale-item-bg: rgba(148, 163, 184, 0.1);
  --scale-item-text: #94a3b8;
  --hamburger-bg: rgba(255, 255, 255, 0.8);
  --menu-bg: rgba(255, 255, 255, 0.95);
  --menu-hover: rgba(148, 163, 184, 0.1);
  --alert-bg: rgba(254, 226, 226, 0.5);
  --alert-border: rgba(239, 68, 68, 0.2);
  --arc-track-stroke: rgba(100, 116, 139, 0.3);
  --arc-fill-glow-opacity: 0.6;
  --indicator-bg: rgba(100, 116, 139, 0.08);
  --indicator-border: rgba(100, 116, 139, 0.18);
  --indicator-bg-lg: rgba(100, 116, 139, 0.08);
  --indicator-border-lg: rgba(100, 116, 139, 0.25);
  --indicator-primary-bg: rgba(100, 116, 139, 0.06);
}

/* Force Dark Mode */
:root.dark-mode {
  --bg-body: #0d0d1a;
  --bg-gradient-start: rgba(0, 242, 254, 0.1);
  --bg-gradient-end: rgba(255, 5, 116, 0.08);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-card-backdrop: blur(10px);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-header: rgba(255, 255, 255, 0.6);
  --text-label: rgba(255, 255, 255, 0.5);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --tab-bg: rgba(255, 255, 255, 0.1);
  --tab-active-bg: #ffffff;
  --tab-active-text: #0d0d1a;
  --chart-bg-stroke: rgba(255, 255, 255, 0.1);
  --scale-item-bg: rgba(255, 255, 255, 0.1);
  --scale-item-text: rgba(255, 255, 255, 0.5);
  --hamburger-bg: rgba(13, 13, 26, 0.8);
  --menu-bg: rgba(13, 13, 26, 0.95);
  --menu-hover: rgba(255, 255, 255, 0.1);
  --alert-bg: rgba(239, 68, 68, 0.15);
  --alert-border: rgba(239, 68, 68, 0.3);
  --arc-track-stroke: rgba(255, 255, 255, 0.07);
  --arc-fill-glow-opacity: 1;
  --indicator-bg: rgba(255, 255, 255, 0.04);
  --indicator-border: rgba(255, 255, 255, 0.06);
  --indicator-bg-lg: rgba(255, 255, 255, 0.04);
  --indicator-border-lg: rgba(255, 255, 255, 0.1);
  --indicator-primary-bg: rgba(255, 255, 255, 0.03);
}

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

body,
html {
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
}

body {
  background: radial-gradient(circle at 10% 20%, var(--bg-gradient-start) 0%, var(--bg-body) 50%),
    radial-gradient(circle at 90% 80%, var(--bg-gradient-end) 0%, var(--bg-body) 50%);
  padding: 2rem;
}