/* ========================================
   HIGHSCORES - Light Theme
   ======================================== */

[data-theme="light"],
:root {
  /* Background colors */
  --bg-color: #fafafe;
  --bg-secondary: #f3f2f8;
  --bg-tertiary: #eae8f1;
  --bg-elevated: white;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Card backgrounds */
  --card-bg: white;
  --card-bg-solid: white;
  --card-border: rgba(99, 102, 241, 0.06);

  /* Text colors */
  --text-color: var(--color-secondary-900);
  --text-primary: var(--color-secondary-900);
  --text-secondary: var(--color-secondary-600);
  --text-tertiary: var(--color-secondary-500);
  --text-muted: var(--color-secondary-400);
  --text-inverse: white;

  /* Border colors */
  --border-color: var(--color-secondary-200);
  --border-color-light: var(--color-secondary-100);
  --border-color-dark: var(--color-secondary-300);

  /* Input colors */
  --input-bg: white;
  --input-border: var(--color-secondary-300);
  --input-placeholder: var(--color-secondary-400);

  /* Navigation */
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-text: var(--color-secondary-600);
  --nav-text-active: #4f46e5;
  --nav-indicator: #6366f1;

  /* Status bar (mobile) */
  --status-bar-style: dark-content;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Gradient overrides for light mode */
  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-success: linear-gradient(135deg, #10b981, #06b6d4);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #ef4444);
  --gradient-accent: linear-gradient(135deg, #6366f1, #06b6d4);

  /* Force light form controls */
  color-scheme: light;
}

/* Light theme popup menu */
[data-theme="light"] .popup-menu {
  background-color: #f8f7fc;
  border: 1px solid var(--border-color);
}

/* Light theme form inputs */
[data-theme="light"] .form-input {
  background-color: #f5f5f8;
  border-color: #d0d0d8;
}