/* static/css/base.css */

:root {
  --color-primary: #012961;
  --color-accent: #ffdc00;
  --color-bg: #f9f9f9;
  --color-text: #222;
  --color-card-hover: rgba(0,0,0,0.1);
  --radius: 8px;
}

body {
  font-family: system-ui, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  color: var(--color-primary);
}

/* Navbar */
.navbar {
  background-color: var(--color-primary);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar .nav-link,
.navbar-brand {
  color: var(--color-primary) !important;
}

.navbar .nav-link:hover {
  text-decoration: underline;
  color: var(--color-accent) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  border: none;
  color: white;
}
.btn-primary:hover {
  background-color: #011f4d;
}

/* Cards */
.card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover:not(.login-card) {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Hover effect voor spelerkaarten - werkt zowel voor <a> als <label> */
a .card:hover,
label.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

label.card {
  cursor: pointer;
}