/* ==========================================================================
   Incoming Sprachschule — Design Tokens v1.1
   Online-Deutschkurse für internationale Freiwillige (B1.1 – B2.2)

   Signatur: Artikel-Farbcode. der = blau, die = rot, das = grün.
   Jede Kursart trägt die Farbe ihres grammatischen Geschlechts.
   Die Farbe ist ableitbar, nicht gestaltet.

   Ali Aljasem · alialjasem.de
   ========================================================================== */

:root {
  /* --- Artikel-Farben: die einzigen Akzentfarben im System ---------------
     Kontraste gegen --grund geprüft (WCAG AA, ≥ 4.5:1) — relevant, weil
     die Schule eine Barrierefreiheitserklärung führt (BFSG).             */
  --der: #1B45D6;   /* 7.0:1 — der Deutschkurs, der Sprachtest, der Fachwortschatz */
  --die: #C4162F;   /* 5.3:1 — die Prüfungsvorbereitung, die Konversation          */
  --das: #146B47;   /* 5.3:1 — das Sprachcafé, das Einzelcoaching                  */

  /* Flächen-Tints, ausschließlich aus den Artikelfarben abgeleitet */
  --der-flaeche: color-mix(in srgb, var(--der) 8%, var(--grund));
  --die-flaeche: color-mix(in srgb, var(--die) 8%, var(--grund));
  --das-flaeche: color-mix(in srgb, var(--das) 8%, var(--grund));

  /* --- Grundfarben ------------------------------------------------------- */
  --grund:  #FBFAF7;
  --tinte:  #141619;
  --nebel:  #63655F;   /* 5.9:1 — Sekundärtext, Labels */
  --linie:  #DCDCD6;

  /* --- Typografie -------------------------------------------------------- */
  --display: "Archivo", system-ui, sans-serif;      /* wdth 118, nur Headlines */
  --text:    "Fira Sans", system-ui, sans-serif;    /* Fließtext, UI           */
  --daten:   "Fira Mono", ui-monospace, monospace;  /* Niveaus, Zeiten, Preise */

  --t-display-xl: clamp(2.5rem, 6.4vw, 5rem);
  --t-display:    clamp(1.875rem, 3.6vw, 3rem);
  --t-h2:         1.375rem;
  --t-body:       1.0625rem;
  --t-klein:      0.875rem;
  --t-label:      0.6875rem;

  --lh-text: 1.65;              /* großzügig: die Leserinnen lesen Deutsch als L2 */
  --track-display: -0.03em;
  --track-label:    0.09em;

  /* --- Raster & Abstände (4px-Basis) ------------------------------------- */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem; --s9: 6rem;

  --r-klein: 4px;
  --r-gross: 10px;
  --r-pille: 999px;

  --breite: 1120px;

  /* --- Bewegung ---------------------------------------------------------- */
  --tempo: 180ms;
  --kurve: cubic-bezier(.2, 0, .1, 1);
}

@media (prefers-reduced-motion: reduce) { :root { --tempo: 0ms; } }

/* --- Artikel-Kontexte: eine Klasse setzt Farbe + Fläche für den Zweig -----
   Wird aus den Kursdaten gesetzt, nicht von Hand gewählt:
   { der: "artikel-der", die: "artikel-die", das: "artikel-das" }[kurs.artikel]
   Bleibt auch in der englischen Oberfläche bestehen — der Kursname ist
   deutsch, also hat er einen Artikel.                                      */
.artikel-der { --artikel: var(--der); --artikel-flaeche: var(--der-flaeche); }
.artikel-die { --artikel: var(--die); --artikel-flaeche: var(--die-flaeche); }
.artikel-das { --artikel: var(--das); --artikel-flaeche: var(--das-flaeche); }