/* ============================================================================
 * lernix-tokens.css  —  Gemeinsame Design-Tokens der Lernix-Suite
 * ----------------------------------------------------------------------------
 * Single Source of Truth für Farben, Typografie, Radien, Abstände der vier
 * Apps (LernSpur · lefoe · KLP-Decomposer · Aufgaben-Hub).
 *
 * Werte sind 1:1 aus LernSpurs gewachsener Palette extrahiert
 * (app/frontend/styles/variables.scss + startpage.scss) — der reifsten,
 * bereits gebrandeten Oberfläche. Hier nur als framework-neutrale
 * CSS-Custom-Properties, damit Bootstrap- (LernSpur, Hub) UND Tailwind-Apps
 * (lefoe, KLP-GUI) dieselben Tokens nutzen können.
 *
 * PRINZIP: Einbinden ist OPTIONAL und degradiert sauber — fehlt diese Datei,
 * läuft jede App mit ihrem eigenen Styling weiter. Versioniert: Apps ziehen
 * im eigenen Tempo nach.
 *
 * Version: 0.1.0  (P0 des Konvergenz-Plans — „an den Nähten verbinden")
 * Prefix:  --lx-*  (lernix)
 * ========================================================================== */

:root {
  /* --- Markenfarbe (Indigo/Violett) ------------------------------------- */
  --lx-primary:         #5a598c;  /* LernSpur-Primär; Buttons, Wortmarke, Links */
  --lx-primary-dark:    #47476e;  /* Hover/aktiv, Linktext */
  --lx-primary-darker:  #252547;  /* tiefster Akzent (Nav-Hover) */
  --lx-primary-tint:    #e5e4f0;  /* helle Lavendel-Fläche (Navbar-Verlauf) */
  --lx-primary-faint:   #5a598c11; /* sehr zarte Einfärbung (~6,7 % Alpha) */
  --lx-accent:          #5e56bb;  /* lebhafterer Akzent (ehem. $levumi-color) */

  /* --- Neutral / Sekundär (Schiefer) ------------------------------------ */
  --lx-secondary:       #616970;
  --lx-secondary-dark:  #434b52;

  /* --- Status ----------------------------------------------------------- */
  --lx-success:         #34823e;
  --lx-success-dark:    #2a642f;
  --lx-danger:          #b73631;
  --lx-danger-dark:     #99342f;
  --lx-warning:         #b5852a;  /* ergänzt (LernSpur hatte keinen) — Bernstein, zur Palette passend */
  --lx-warning-dark:    #946a1f;
  --lx-info:            var(--lx-primary);

  /* --- Basis / Flächen / Text ------------------------------------------- */
  --lx-white:           #ffffff;
  --lx-black:           #000000;
  --lx-bg:              #ffffff;  /* Seitenhintergrund */
  --lx-surface:         #ffffff;  /* Karten/Panels */
  --lx-surface-2:       #f5f5f8;  /* dezent abgesetzte Fläche */
  --lx-border:          #dee2e6;  /* Standard-Rahmen (Bootstrap-Neutral) */
  --lx-border-strong:   #c3c6cb;
  --lx-text:            #212529;  /* Fließtext */
  --lx-text-muted:      #616970;  /* gedämpft = Sekundärfarbe */
  --lx-text-on-primary: #ffffff;  /* Text auf Markenfläche */
  --lx-link:            var(--lx-primary-dark);
  --lx-link-hover:      var(--lx-primary-darker);

  /* --- Fokus-Ring (Tastatur/Barrierefreiheit) --------------------------- */
  --lx-focus-ring:      0 0 0 0.2rem rgba(94, 86, 187, 0.35);

  /* --- Typografie ------------------------------------------------------- */
  /* UI-Schrift: System-Stack (LernSpur-UI nutzt Bootstrap-Default, KEIN
     Fibel Nord — das ist nur Testinhalt-Schrift). */
  --lx-font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Marken-/Wortmarken-Schrift: Grundschrift (LernSpur-Headline #5a598c).
     Optional — siehe @font-face-Vorlage unten; Fallback = Sans. */
  --lx-font-brand: "Grundschrift", var(--lx-font-sans);
  --lx-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --lx-text-xs:   0.75rem;
  --lx-text-sm:   0.875rem;
  --lx-text-base: 1rem;
  --lx-text-lg:   1.25rem;
  --lx-text-xl:   1.5rem;
  --lx-text-2xl:  2rem;
  --lx-leading:   1.5;
  --lx-weight-normal: 400;
  --lx-weight-medium: 500;
  --lx-weight-bold:   700;

  /* --- Radien ----------------------------------------------------------- */
  --lx-radius-sm: 4px;
  --lx-radius:    6px;
  --lx-radius-md: 8px;
  --lx-radius-lg: 12px;
  --lx-radius-pill: 999px;

  /* --- Abstände (4px-Skala) --------------------------------------------- */
  --lx-space-1: 0.25rem;
  --lx-space-2: 0.5rem;
  --lx-space-3: 0.75rem;
  --lx-space-4: 1rem;
  --lx-space-5: 1.5rem;
  --lx-space-6: 2rem;
  --lx-space-8: 3rem;

  /* --- Schatten (flach gehalten) ---------------------------------------- */
  --lx-shadow-sm: 0 1px 2px rgba(37, 37, 71, 0.06);
  --lx-shadow:    0 2px 8px rgba(37, 37, 71, 0.08);
  --lx-shadow-lg: 0 8px 24px rgba(37, 37, 71, 0.12);
}

/* ----------------------------------------------------------------------------
 * Dark-Mode-Startpunkt (bewusst minimal — bei Bedarf je App verfeinern).
 * Markenton bleibt erhalten, Flächen/Text drehen.
 * -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --lx-bg:            #16161d;
    --lx-surface:       #1e1e27;
    --lx-surface-2:     #262633;
    --lx-border:        #34343f;
    --lx-border-strong: #45454f;
    --lx-text:          #e8e8ee;
    --lx-text-muted:    #a6a6b3;
    --lx-primary-tint:  #2a2940;
    --lx-link:          #b9b6e6;
    --lx-link-hover:    #d6d4f2;
  }
}

/* ----------------------------------------------------------------------------
 * OPTIONAL: Marken-Schrift „Grundschrift" einbinden.
 * Voraussetzung: die App hostet die Font-Dateien (aus LernSpur:
 * app/assets/fonts/Grundschrift.woff2|woff) unter dem unten genannten Pfad.
 * Lizenz vor breiter Nutzung prüfen. Bis dahin greift der Sans-Fallback.
 * -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Grundschrift";
  src: url("/fonts/Grundschrift.woff2") format("woff2"),
       url("/fonts/Grundschrift.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* ----------------------------------------------------------------------------
 * Mini-Helfer (optional). Bewusst klein gehalten — das echte UI-Kit
 * (Header, Flash, Buttons) folgt in Phase P2.
 * -------------------------------------------------------------------------- */
.lx-brand-wordmark {
  font-family: var(--lx-font-brand);
  color: var(--lx-primary);
  font-weight: var(--lx-weight-bold);
}