/* LUDAVI – Design-Tokens (Lernspiele by VI2VA)
 *
 * Abgeleitet aus HORAVI (ki-termin-assistent/branding/tokens/tokens.css) und VIGIL
 * (server-maintenence-agent/branding/BRAND.md). Gleiche Variablennamen, damit die
 * Produktfamilie konsistent bleibt. Farben aus dem CI-Guide VI2VA.
 *
 * Schriften: Montserrat (Überschriften) + Nunito Sans (Text), SIL OFL, lokal unter
 * assets/fonts/ – keine Google-Fonts-CDN (DSGVO).
 */

@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 600; font-display: swap; src: url("../assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url("../assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  /* --- Basis (Namen wie HORAVI) --- */
  --bg: #f7f6f9;
  --surface: #ffffff;
  --border: #e3dfe8;
  --text: #1d1d1b;           /* CI-Schwarz */
  --muted: #5b5762;
  --accent: #791496;         /* VI2VA Purple */
  --accent-soft: #f1e6f5;
  --accent-hover: #5a0f70;
  --on-accent: #ffffff;
  --ok: #14606b;
  --radius: 10px;
  --tap: 44px;
  --focus-ring: 0 0 0 3px rgba(121, 20, 150, 0.35);

  /* --- Marke --- */
  --brand-purple: #791496;
  --brand-purple-60: #af72c0;
  --brand-purple-20: #e4d0ea;
  --brand-teal: #30afc0;       /* Flächen/Grafik, nie Text auf Weiß */
  --brand-teal-60: #7fd0db;
  --brand-teal-20: #d5eef3;
  --brand-teal-text: #14606b;
  --brand-black: #1d1d1b;
  --brand-navy: #06283d;       /* Hero-Grund wie HORAVI-Anmeldung */
  --brand-navy-15: #dce3e8;

  /* --- Hero (immer dunkel, wie HORAVI) --- */
  --hero-bg: #06283d;
  --hero-text: #ffffff;
  --hero-muted: #c8d3db;
  --hero-chip: rgba(255, 255, 255, 0.08);
  --hero-accent: #c9a0d5;

  /* --- Spielkarten-Töne (Illustrationsfläche) --- */
  --tone-purple: #e4d0ea;
  --tone-teal: #d5eef3;
  --tone-navy: #dce3e8;

  /* --- Typografie --- */
  --font-heading: "Montserrat", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(32px, 5vw, 48px);
  --fs-h2: clamp(24px, 3vw, 30px);
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-small: 13px;

  /* --- Form --- */
  --radius-sm: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.08);
  --shadow-card: 0 6px 20px rgba(6, 40, 61, 0.08);
  --container: 1120px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14121a;
    --surface: #1e1b24;
    --border: #34303c;
    --text: #edebf0;
    --muted: #a7a2ae;
    --accent: #c9a0d5;
    --accent-soft: #33213d;
    --accent-hover: #dcc0e4;
    --on-accent: #1d1d1b;
    --ok: #7fd0db;
    --focus-ring: 0 0 0 3px rgba(201, 160, 213, 0.45);
    --hero-bg: #0b1f2c;
    --tone-purple: #3a2445;
    --tone-teal: #173a40;
    --tone-navy: #1f3442;
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}