/**
 * Site Theme Configuration
 * Defines color schemes for both light and dark modes
 * Theme toggle automatically switches between these CSS class-based themes
 */

/* ==================== Light Theme (Default) ==================== */
body.light {
  /* Primary Colors */
  --primary-color: #1f2937;
  --primary-hover: #263243;
  --primary-light: #1f2937;

  /* Background Colors */
  --main-color-bg: #FFFFFF;
  --main-color-bg-light: #F8F9FA;
  --main-color-bg-secondary: #E9ECEF;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(255, 255, 255, 0.95);

  /* Text Colors */
  --main-color-text: #222222;
  --text-primary: #2C3E50;
  --text-secondary: #7F8C8D;
  --text-muted: #95A5A6;
  --text-inverse: #FFFFFF;

  /* Border Colors */
  --border-color: #E1E8ED;
  --border-light: #F0F3F5;
  --border-dark: #CBD5E0;

  /* State Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Interactive Elements */
  --link-color: #3B82F6;
  --link-hover: #2563EB;
  --button-bg: var(--primary-color);
  --button-text: #FFFFFF;
  --button-hover-bg: var(--primary-hover);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Game Card Specific */
  --game-card-bg: #FFFFFF;
  --game-card-hover-bg: #F8F9FA;
  --game-card-border: #E1E8ED;
  --game-tag-bg: #F0F3F5;
  --game-tag-text: #4B5563;

  /* Header & Navigation */
  --header-bg: #FFFFFF;
  --header-text: #222222;
  --nav-link-color: #4B5563;
  --nav-link-hover: var(--primary-color);
  --sidebar-bg: #FFFFFF;

  /* Search */
  --search-bg: #F8F9FA;
  --search-border: #E1E8ED;
  --search-text: #222222;
  --search-placeholder: #95A5A6;
}

/* ==================== Dark Theme ==================== */
body.dark {
  /* Primary Colors - Slightly lighter for better dark mode contrast */
  --primary-color: #1f2937;
  --primary-hover: #263243;
  --primary-light: #3E2723;

  /* Background Colors */
  --main-color-bg: #7a97d0;
  --main-color-bg-light: #054bc2;
  --main-color-bg-secondary: #374151;
  --bg-card: #2963c5;
  --bg-overlay: rgba(26, 32, 44, 0.95);

  /* Text Colors */
  --main-color-text: #E2E8F0;
  --text-primary: #F7FAFC;
  --text-secondary: #CBD5E0;
  --text-muted: #A0AEC0;
  --text-inverse: #1A202C;

  /* Border Colors */
  --border-color: #4A5568;
  --border-light: #374151;
  --border-dark: #718096;

  /* State Colors - Adjusted for dark mode visibility */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #60A5FA;

  /* Interactive Elements */
  --link-color: #60A5FA;
  --link-hover: #93C5FD;
  --button-bg: var(--primary-color);
  --button-text: #1A202C;
  --button-hover-bg: var(--primary-hover);

  /* Shadows - Lighter shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

  /* Game Card Specific */
  --game-card-bg: #2963c5;
  --game-card-hover-bg: #374151;
  --game-card-border: #4A5568;
  --game-tag-bg: #374151;
  --game-tag-text: #CBD5E0;

  /* Header & Navigation */
  --header-bg: #2D3748;
  --header-text: #E2E8F0;
  --nav-link-color: #CBD5E0;
  --nav-link-hover: var(--primary-color);
  --sidebar-bg: #2D3748;

  /* Search */
  --search-bg: #374151;
  --search-border: #4A5568;
  --search-text: #E2E8F0;
  --search-placeholder: #9CA3AF;
}

/* ==================== Theme Transition ==================== */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme-aware elements */
.header,
.nav-side,
.game-card,
.search-form,
button,
a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==================== Markdown Table Styling ==================== */

/* Light Theme Table Styles */
body.light table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.light table th {
  background-color: #F0F3F5;
  color: var(--text-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-dark);
}

body.light table th:last-child {
  border-right: none;
}

body.light table td {
  padding: 12px 16px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

body.light table td:last-child {
  border-right: none;
}

body.light table tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}

body.light table tbody tr:nth-child(even) {
  background-color: #F8F9FA;
}

body.light table tbody tr:hover {
  background-color: #EFF4F8;
  transition: background-color 0.2s ease;
}

body.light table tbody tr:last-child td {
  border-bottom: none;
}

/* Dark Theme Table Styles */
body.dark table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.dark table th {
  background-color: #374151;
  color: var(--text-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-dark);
}

body.dark table th:last-child {
  border-right: none;
}

body.dark table td {
  padding: 12px 16px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

body.dark table td:last-child {
  border-right: none;
}

body.dark table tbody tr:nth-child(odd) {
  background-color: #2D3748;
}

body.dark table tbody tr:nth-child(even) {
  background-color: #374151;
}

body.dark table tbody tr:hover {
  background-color: #4A5568;
  transition: background-color 0.2s ease;
}

body.dark table tbody tr:last-child td {
  border-bottom: none;
}