/*
  fox-on Brand-Variablen.
  Werte hier zentral anpassen — main.css und die Module nutzen ausschließlich
  diese Variablen (mit Fallback-Werten), Struktur/Namen sollten stabil bleiben.
*/

:root {
  /* Farben */
  --color-primary: #1f2148;
  --color-primary-dark: #1f2148;
  --color-accent: #00418e;
  --color-background: #ffffff;
  --color-surface: #f6f4f0;
  --color-text: #1f2148;
  --color-text-muted: #5a5a5a;
  --color-border: #d0d3d6;
  --color-success: #2f6d3c;
  --color-success-bg: #e7f2e9;
  --color-error: #a33d3d;
  --color-error-bg: #fbeaea;

  /* Buttons */
  --color-button-bg: #00418e;
  --color-button-text: #ffffff;
  --color-button-hover-bg: #1f2148;
  --color-button-hover-text: #ffffff;
  --color-button-secondary-bg: #ffffff;
  --color-button-secondary-border: #1f2148;
  --color-button-secondary-text: #1f2148;
  --color-button-secondary-hover-bg: #1f2148;
  --color-button-secondary-hover-text: #ffffff;

  /* Memory-Modul */
  --color-memory-card-back: #1f2148;
  --color-memory-icon: #00418e;

  /* Aliase für Module mit eigenen Variablennamen (z. B. scenario-quiz.css) */
  --color-muted: var(--color-text-muted);
  --color-on-primary: var(--color-background);
  --color-success-text: var(--color-success);
  --color-error-text: var(--color-error);
  --color-primary-light: var(--color-surface);

  /* Typografie */
  --font-heading: "Montserrat", system-ui, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, "Segoe UI", sans-serif;
  --font-weight-body: 500;
  --font-weight-heading: 700;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.75rem;
  --line-height-base: 1.5;

  /* Abstände */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* Sonstiges */
  --border-radius: 12px;
  --max-content-width: 960px;
}