/* === CSS Variables === */
:root {
  --color-team-1: #FFC107;
  --color-team-2: #2196F3;
  --color-team-3: #4CAF50;
  --color-team-4: #F44336;
  --color-team-5: #673AB7;

  --color-primary: #0061A4;
  --color-primary-light: #D1E4FF;
  --color-surface: #F8FAFF;
  --color-on-surface: #1A1C1E;
  --color-on-surface-secondary: #43474E;
  --color-border: #BFC6D4;
  --color-bg: #E6EBF4;
  --color-hover: #DEE6F2;
  --color-active: #D7E3F7;

  --sidebar-left-width: 280px;
  --sidebar-left-collapsed-width: 56px;
  --sidebar-right-width: 280px;
  --sidebar-right-collapsed-width: 56px;
  --header-height: 48px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* === Dark Theme === */
[data-theme="dark"] {
  --color-primary: rgba(157, 202, 255, 0.8);
  --color-primary-light: #00497D;
  --color-surface: #181B22;
  --color-on-surface: rgba(226, 226, 229, 0.8);
  --color-on-surface-secondary: #C3C7CF;
  --color-border: #414754;
  --color-bg: #10131A;
  --color-hover: #272B35;
  --color-active: #00497D;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
}