:root {
  /* Core Colors */
  --color-bg-primary: #242424;
  --color-bg-secondary: #f0f0f0;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #242424;

  /* Accent Colors */
  --color-accent-primary: #4caf50;
  --color-accent-secondary: #32afaf;
  --color-accent-warning: #ff9800;
  --color-accent-danger: #f44336;

  /* Neutral Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ELO Rating Colors */
  --color-elo-high: #4caf50;
  --color-elo-mid: #ff9800;
  --color-elo-low: #f44336;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Typography */
  --font-family-base: Verdana, Tahoma, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

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

img {
  user-select: none;
  pointer-events: none;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

#app {
  min-height: 100vh;
  width: 100%;
}

/* Generic Input Styles */
.generic-input {
  height: 2em;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  text-align: center;
  border-radius: var(--radius-xl);
  width: 10%;
  min-width: 15em;
  border: 2px solid transparent;
  transition: outline var(--transition-slow);
  outline: rgba(76, 175, 80, 0) solid 4px;
}

.generic-input:focus {
  outline: var(--color-accent-primary) solid 4px;
}

/* Generic Button Styles */
.generic-button {
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  padding: var(--spacing-sm) var(--spacing-lg);
  padding-bottom: 0.15em;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-base);
  background-color: var(--color-bg-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.generic-button:hover {
  outline: var(--color-accent-secondary) solid 4px;
}

.generic-button:active {
  transform: scale(0.98);
}

/* Block Components */
.gray-block {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.white-block {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

/* Title Styling */
.title-main {
  text-align: center;
  padding-bottom: 0.15em;
  padding-top: 1em;
  font-weight: bold;
  font-size: var(--font-size-xxl);
  font-family: Tahoma, var(--font-family-base);
  width: 100%;
  transition: text-shadow var(--transition-normal);
}

.title-main:hover {
  text-shadow: 2px 2px 2px var(--color-overlay);
}

/* List Item */
.list-item {
  display: flex;
  margin: var(--spacing-lg);
  border-radius: var(--radius-lg);
  min-height: 60%;
  min-width: 40em;
  transition: transform var(--transition-normal);
}

.list-item:hover {
  transform: scale(1.05);
}

.list-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40%;
}

.list-item-text-name {
  font-weight: bold;
  font-size: var(--font-size-lg);
  font-family: Tahoma, var(--font-family-base);
}

.list-item-text-desc {
  text-wrap: balance;
  margin-top: var(--spacing-xs);
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  text-align: justify;
}

.list-item-image {
  margin: var(--spacing-md);
  border-radius: var(--radius-lg);
  width: 22%;
}

/* ELO Badge */
.elo-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: bold;
}

.elo-badge.high {
  background-color: var(--color-elo-high);
  color: white;
}

.elo-badge.mid {
  background-color: var(--color-elo-mid);
  color: white;
}

.elo-badge.low {
  background-color: var(--color-elo-low);
  color: white;
}

/* Tag Chip */
.tag-chip {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-secondary);
  color: white;
  font-size: var(--font-size-sm);
  margin: var(--spacing-xs);
}

.tag-chip.super {
  background-color: var(--color-accent-primary);
}

.tag-chip.negative {
  background-color: var(--color-accent-danger);
}

.tag-chip.contradiction {
  outline: 2px solid var(--color-accent-danger);
}