/* =========================================================================
   QUADRONET Base - Tokens
   -------------------------------------------------------------------------
   Bewusst farblos: Graustufen, Abstaende, Groessen. Keine Markenfarbe, keine
   Hausschrift. Beides kommt aus dem Theme - es ueberschreibt einfach die
   Werte hier, ohne Neukompilierung, weil es Custom Properties sind und
   keine wegkompilierten Variablen.
   ========================================================================= */

@layer qn.tokens {
  :root {
    /* ----- Graustufen (oklch: gleiche Helligkeit wirkt gleich hell) ----- */
    --qn-grau-0:   oklch(100% 0 0);
    --qn-grau-50:  oklch(98% 0 0);
    --qn-grau-100: oklch(95% 0 0);
    --qn-grau-200: oklch(90% 0 0);
    --qn-grau-300: oklch(82% 0 0);
    --qn-grau-400: oklch(70% 0 0);
    --qn-grau-500: oklch(58% 0 0);
    --qn-grau-600: oklch(47% 0 0);
    --qn-grau-700: oklch(37% 0 0);
    --qn-grau-800: oklch(27% 0 0);
    --qn-grau-900: oklch(18% 0 0);
    --qn-grau-950: oklch(12% 0 0);

    /* ----- Bedeutung (das konsumiert alles Weitere) -------------------- */
    --qn-flaeche:        var(--qn-grau-0);
    --qn-flaeche-sanft:  var(--qn-grau-50);
    --qn-flaeche-betont: var(--qn-grau-900);

    --qn-schrift:        var(--qn-grau-900);
    --qn-schrift-leise:  var(--qn-grau-600);
    --qn-schrift-invers: var(--qn-grau-0);
    --qn-schrift-link:   var(--qn-grau-900);

    --qn-linie-fein:  var(--qn-grau-200);
    --qn-linie:       var(--qn-grau-300);
    --qn-linie-stark: var(--qn-grau-500);
    --qn-fokus:       var(--qn-grau-900);

    /* ----- Schrift ------------------------------------------------------ */
    --qn-schriftfamilie: system-ui, -apple-system, "Segoe UI", sans-serif;
    --qn-schriftfamilie-ueberschrift: var(--qn-schriftfamilie);
    --qn-schriftfamilie-fest: ui-monospace, "SFMono-Regular", Consolas, monospace;

    --qn-groesse-text: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --qn-groesse-h1:   clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --qn-groesse-h2:   clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
    --qn-groesse-h3:   clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
    --qn-groesse-h4:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --qn-groesse-klein: 0.875rem;

    --qn-zeile-eng:     1.2;
    --qn-zeile-normal:  1.55;
    --qn-zeile-weit:    1.75;

    /* ----- Abstaende ---------------------------------------------------- */
    --qn-raum-3xs: 0.125rem;
    --qn-raum-2xs: 0.25rem;
    --qn-raum-xs:  0.5rem;
    --qn-raum-sm:  0.75rem;
    --qn-raum-md:  1rem;
    --qn-raum-lg:  1.5rem;
    --qn-raum-xl:  2.25rem;
    --qn-raum-2xl: 3.5rem;
    --qn-raum-3xl: 5.25rem;

    /* ----- Breiten ------------------------------------------------------ */
    --qn-breite-schmal: 40rem;
    --qn-breite:        65rem;
    --qn-breite-weit:   80rem;
    --qn-rand:          clamp(1rem, 4vw, 3rem);

    /* ----- Medien -------------------------------------------------------
       Anteil, den ein Bild neben dem Text einnimmt. Muss zu
       styles.content.textmedia.maxWInText passen (420 von 944 = 44,5 %),
       sonst rechnet der Server mit einer anderen Breite, als das Layout
       anzeigt. */
    --qn-medien-imtext: 44%;
    --qn-medien-rahmen: 1px;

    /* ----- Sonstiges ---------------------------------------------------- */
    --qn-radius:    0;
    --qn-dauer:     0.25s;
    --qn-verlauf:   cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Hoehe einer stehenden Kopfleiste; das Theme setzt sie, wenn es eine
       hat. Ankersprünge rechnen damit (siehe setup.typoscript). */
    --qn-ankerabstand: 0px;
  }
}