/* ==========================================================================
   TUTORIAL DESIGN SYSTEM - GRUNDLAGEN
   ==========================================================================
   Eigenes, vom uebrigen Seitendesign abgetrenntes System fuer die Seiten
   unter Route::group(['prefix' => 'anleitungen']) und die Hilfeseiten.

   Referenzseite : /design_overview/anleitungen
                   resources/views/website_design/tutorial_design_overview.blade.php

   KLASSEN-PREFIX
   Alle neuen Klassen dieses Systems beginnen mit "tut-". Der Unterstrich-
   Stil der Altklassen (tutorial_wrapper, tutorial_step_header, info_box_outer)
   gehoert NICHT dazu und wird schrittweise abgeloest. Solange beide Systeme
   nebeneinander laufen, kollidiert nichts: "tut-" ist im gesamten
   public/css-Baum sonst nicht vergeben.

   TYPOGRAFIE
   Kommt unveraendert aus public/css/fonts.css (Open Sans, --text-size-*,
   --sp-*). Dieses System definiert KEINE eigenen Schriftgroessen-Variablen,
   es benutzt die vorhandene Skala. Neu sind nur die Rollen weiter unten.

   STAND
   Diese Datei haelt vorerst nur die Tokens. Die Komponenten-Regeln kommen
   Fall fuer Fall dazu, sobald ein Fall auf der Referenzseite abgenommen ist.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------------------
   Stehen auf :root, nicht auf einer Scope-Klasse. Ein erster Versuch band
   sie an .tut-scope, um sie nicht in den Rest der Seite lecken zu lassen -
   das setzt aber voraus, dass diese Klasse auf jeder Seite, die auch nur
   einen tut-Baustein benutzt, tatsaechlich gesetzt wird. Genau das wurde
   auf der ersten echten Seite vergessen: jedes var(--tut-*) loeste ins
   Leere auf, Hintergruende und Rahmen verschwanden grossflaechig, ohne
   dass ein Blade- oder CSS-Fehler aufgetreten waere. :root ist robuster:
   die Namen sind eindeutig ("tut-" kollidiert mit nichts Bestehendem im
   Projekt), das einzige Risiko waere ein Namenskonflikt, keine Vergesslichkeit.

   Die Werte sind aus dem Bestand geerntet, nicht neu erfunden. Wo der Bestand
   mehrere Werte fuer dieselbe Rolle kennt (fuenf Radien, drei Grautoene fuer
   Fliesstext), steht hier bereits die reduzierte Auswahl.
   -------------------------------------------------------------------------- */

:root {

    /* SCHRIFT
       --tut-font  Eine Familie fuer Ueberschriften UND Fliesstext.

       Vorher besass dieses System gar keine font-family. Die Folge stand auf
       jeder Seite: Ueberschriften kamen als Roboto aus fonts.css:143, der
       Fliesstext als system-ui aus dem *-Reset in footer/1_main-footer.css:23 -
       zwei Familien auf einer Seite, keine davon absichtlich gewaehlt und
       keine davon die Open Sans, die dieser Kopf oben behauptet. Open Sans
       liegt seit jeher selbst gehostet in neun Schnitten (Light bis ExtraBold
       plus Kursive, fonts.css:14-72) und wurde auf den Anleitungsseiten nie
       benutzt. Jetzt schon.

       Der system-ui-Fallback bleibt fuer den Moment zwischen erstem Paint und
       geladener Schriftdatei stehen. */
    --tut-font: 'Open Sans', system-ui, -apple-system, sans-serif;

    /* FARBEN - BLAU
       --tut-blue        Markenblau. Nummern, Akzente, aktive Zustaende.
       --tut-blue-dark   Ueberschriften, Icons in Plaketten, Links.
       --tut-blue-tint   Flaechige Toenung (Icon-Plaketten, Schritt-Kacheln).
       --tut-blue-faint  Sehr leichte Toenung fuer grosse Flaechen. */
    --tut-blue: #4279BC;
    --tut-blue-dark: #1f4c83;
    --tut-blue-tint: #f0f7ff;
    --tut-blue-faint: rgb(66 121 188 / 4%);

    /* FARBEN - TEXT
       --tut-text        Fliesstext.
       --tut-text-strong Ueberschriften und hervorgehobene Zeilen.
       --tut-text-muted  Beschreibungen unter Ueberschriften, Bildunterschriften.

       Der Bestand kennt hier vier Werte (#222222, #334155, #475569, #64748b).
       Reduziert auf drei Rollen: #475569 verschwindet zugunsten von --tut-text. */
    --tut-text: #334155;
    --tut-text-strong: #1e293b;
    --tut-text-muted: #64748b;

    /* FARBEN - FLAECHE UND KANTE
       --tut-border      Einzige Rahmenfarbe des Systems.
       --tut-surface     Kastenhintergrund auf weissem Grund.
       --tut-page        Seitengrund. */
    --tut-border: #e2e8f0;
    --tut-surface: #f8fafc;
    --tut-page: #ffffff;

    /* RADIEN
       Der Bestand nutzt 0.25em, 4px, 6px, 8px und 12px nebeneinander.
       Reduziert auf zwei Stufen: klein fuer Inline-Elemente und Plaketten,
       gross fuer Kaesten. */
    --tut-radius-s: 6px;
    --tut-radius-l: 10px;

    /* ZEILENHOEHE
       --tut-lh-text   Fliesstext. Der Bestand steht auf 1.8 (1_tutorial.css)
                       beziehungsweise 1.6 und 1.7 (fancy.css) - hier eine Zahl.
       --tut-lh-tight  Ueberschriften und kurze Zeilen in Kacheln. */
    --tut-lh-text: 1.7;
    --tut-lh-tight: 1.3;

    /* MASSE
       --tut-measure   Maximale Zeilenlaenge im Fliesstext.
       --tut-icon-box  Kantenlaenge der quadratischen Icon-Plakette. */
    --tut-measure: 68ch;
    --tut-icon-box: 34px;
}