/* =========================================
   VARIABLES.CSS – Basis-Designsystem
   ========================================= */

/* ===== Default Theme: Dunkelblau + Gold ===== */
:root {
  /* Farben */
  --color-background: #0a1a33;   /* tiefes Dunkelblau */
  --color-text: #e6e6e6;         /* helles Grau */
  --color-accent: #d4af37;       /* Gold */
  --color-accent-hover: #f2c94c; /* helleres Gold */
  --color-shadow: rgba(0,0,0,0.4);

  /* Buttons */
  --btn-bg: var(--color-accent);
  --btn-text: #0a1a33;
  --btn-hover-bg: var(--color-accent-hover);
  --btn-hover-text: #000;

  /* Links */
  --link-color: var(--color-accent);
  --link-hover: var(--color-accent-hover);

  /* Abstände */
  --radius: 8px;
  --transition: 0.25s ease;
}

/* ===== Globale Anwendung ===== */
body {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ===== Links ===== */
a {
  color: var(--link-color);
  transition: var(--transition);
}

a:hover {
  color: var(--link-hover);
}

/* ===== Buttons ===== */
button,
.btn {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

button:hover,
.btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}