/*
 * GOAT Ecom, Designtokens. Richtung Schaukasten.
 *
 * Einzige Quelle fuer Farbe, Typografie, Abstand und Layout.
 * Keine Datei ausser dieser definiert einen Farbwert oder eine
 * Schriftgroesse.
 *
 * Leitbild: die Seite ist ein Schaukasten. Sie ist hell, ruhig und
 * zurueckhaltend, damit das, was darin liegt, die Aufmerksamkeit
 * bekommt. Die einzigen kraeftigen Farben kommen aus den
 * Screenshots der gebauten Seiten.
 *
 * Prueffrage bei jeder Entscheidung: Konkurriert dieses Element mit
 * den Screenshots, oder rahmt es sie? Konkurrenz wird entfernt.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Farben, als Rollen benannt
	 *
	 * Die Namen sagen, wofuer eine Farbe da ist, nicht wie sie
	 * aussieht.
	 *
	 * Dunkel ist die einzige Fassung. Es gibt keinen Umschalter,
	 * keine zweite Palette und keine Klasse, die Werte tauscht.
	 * Keine Regel im Theme kennt einen Farbwert.
	 * ------------------------------------------------------------- */

	/* Seitenhintergrund, Graphit */
	--ge-flaeche: #14161A;

	/*
	 * Zweiter Sektionshintergrund fuer den Hell-Dunkel-Wechsel
	 * zwischen Sektionen, siehe .ge-sektion--glanz in start.css. Kaum
	 * heller als --ge-flaeche, 14,2:1 fuer Text, 6,2:1 fuer
	 * --ge-text-leise, praktisch gleich zur Flaeche.
	 */
	--ge-flaeche-glaenzend: #1A1D22;

	/* Karten, Formularfelder, gehobene Flaechen */
	--ge-flaeche-2: #1C1F24;

	/* Text und Ueberschriften. 15,2:1 auf der Flaeche, 13,9:1 auf der Karte. */
	--ge-text: #EDEBE6;

	/*
	 * Sekundaertext. 6,7:1 auf der Flaeche, 6,1:1 auf der Karte.
	 * Die Linienfarbe faellt als Text durch.
	 */
	--ge-text-leise: #9A9DA3;

	/*
	 * Interaktiv. Buttons, Links, Fokusring, aktive Zustaende.
	 * Nie als Flaeche im Sinn von Dekoration, nie in Ueberschriften.
	 *
	 * 5,7:1 auf der Flaeche, 5,2:1 auf der Karte. Als Fokusring
	 * weit ueber den 3:1 aus WCAG 1.4.11. Das Tiefgruen der hellen
	 * Richtung kaeme hier auf 2,4:1 und ist deshalb gestrichen.
	 */
	--ge-akzent: #2FA46E;

	/*
	 * Schrift auf einer Akzentflaeche: dunkel, nicht weiss.
	 * 5,7:1 auf dem Akzent, Weiss kaeme auf 3,15:1.
	 */
	--ge-akzent-text: #14161A;

	/*
	 * Haarlinien und Trennstriche, rein dekorativ. Traegt nie Text
	 * und umrandet nie ein Bedienelement, dafuer ist die Kante da.
	 */
	--ge-linie: #3A3E45;

	/*
	 * Rahmen von Bedienelementen: Eingabefeld, Umrissknopf,
	 * Auswahlkasten. Braucht 3:1 nach WCAG 1.4.11: 3,3:1 auf der
	 * Flaeche, 3,0:1 auf der Karte. Die Linienfarbe kaeme dort auf
	 * 1,5:1.
	 */
	--ge-kante: #636A76;

	/*
	 * Statusfarbe, keine Akzentfarbe. Der Akzent bedeutet auf dieser
	 * Seite bereits "erfolgreich" und "hier klicken", er kann nicht
	 * gleichzeitig "falsch" heissen. Ausschliesslich fuer
	 * Fehlertext, die Fehlerkante am Feld und die Fehlermeldung
	 * ueber dem Formular. Nirgends sonst.
	 *
	 * 6,5:1 auf der Flaeche, 5,9:1 auf der Karte, wo die
	 * Formularfelder liegen.
	 */
	--ge-fehler: #FF6B5A;

	/* ---------------------------------------------------------------
	 * 3. Schriftfamilien
	 *
	 * Zwei Familien, drei Dateien. Die Mono ist ersatzlos gestrichen.
	 * Der jeweils zweite Eintrag ist das metrisch angeglichene
	 * Fallback aus assets/css/_fonts.css.
	 * ------------------------------------------------------------- */
	--ge-font-display: "Archivo Expanded", "Archivo Expanded Fallback", "Helvetica Neue", Arial, sans-serif;
	--ge-font-text: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;

	/* ---------------------------------------------------------------
	 * 4. Schriftgroessen
	 *
	 * H2 ist kleiner als im alten System. In einem hellen, ruhigen
	 * Layout tragen Ueberschriften durch Weissraum, nicht durch
	 * Groesse.
	 * ------------------------------------------------------------- */
	/*
	 * Der Deckel haengt an der Inhaltsbreite, nicht am Fenster.
	 * Bei 1440 px ist die Textspalte 556 px breit, mehr als 4.26rem
	 * passt dort nicht in eine Zeile.
	 */
	--ge-h1: clamp(2.5rem, 5.5vw, 4.26rem);
	--ge-h2: clamp(1.75rem, 3.2vw, 2.75rem);
	--ge-h3: clamp(1.125rem, 1.6vw, 1.5rem);
	--ge-body: clamp(1rem, 1.05vw, 1.125rem);
	--ge-label: .75rem;
	--ge-klein: .875rem;

	/* ---------------------------------------------------------------
	 * 5. Schnitt, Zeilenhoehe, Laufweite
	 * ------------------------------------------------------------- */
	--ge-gewicht-display: 800;
	--ge-gewicht-text: 400;
	--ge-gewicht-text-kraeftig: 500;

	--ge-zeile-display: 1.02;
	--ge-zeile-h3: 1.25;
	--ge-zeile-body: 1.7;
	--ge-zeile-label: 1.4;

	--ge-laufweite-display: -.02em;
	--ge-laufweite-label: .14em;

	--ge-zeilenlaenge: 66ch;

	/* ---------------------------------------------------------------
	 * 6. Abstaende, Vierer-Raster
	 * ------------------------------------------------------------- */
	--ge-space-3xs: .25rem;
	--ge-space-2xs: .5rem;
	--ge-space-xs: .75rem;
	--ge-space-s: 1rem;
	--ge-space-m: 1.5rem;
	--ge-space-l: 2.5rem;
	--ge-space-xl: 4rem;
	--ge-space-2xl: 6rem;
	--ge-space-3xl: 9rem;

	/*
	 * Vertikaler Abstand zwischen Sektionen: 96px unter 900px,
	 * 160px auf Desktop. Das ist deutlich mehr als vorher und traegt
	 * die halbe Wirkung dieser Richtung. Wirkt eine Sektion zu leer,
	 * ist die Antwort besserer Inhalt, nicht weniger Abstand.
	 */
	--ge-sektion-y: clamp(6rem, 11vw, 10rem);

	/* ---------------------------------------------------------------
	 * 7. Layout
	 * ------------------------------------------------------------- */
	--ge-inhalt-max: 1240px;
	--ge-rinne: 32px;
	--ge-rand: clamp(1.25rem, 5vw, 3rem);

	/* Sektionsleiste links, erst ab 1100px sichtbar */
	--ge-leiste-breite: 72px;

	/*
	 * Platz, den die Leiste dem Inhalt wegnimmt.
	 *
	 * Nicht dasselbe wie ihre Breite. Gewollt sind 140px, bewusst
	 * knapper als das laengste Label: die Bezeichnung steht nur bei
	 * der aktiven Sektion und damit fast immer allein im Weissraum.
	 * Das laengste Leistenwort wurde dafuer gekuerzt, KI-Suche
	 * statt KI-Auffindbarkeit.
	 *
	 * Die 140px tragen aber erst, sobald die Zentrierung der
	 * Inhaltsspalte eigenen Rand erzeugt. Unterhalb von 1400px
	 * Fensterbreite beginnt der Text direkt am Einzug, und
	 * Musterlayouts endet als laengstes verbliebenes Wort bei
	 * 191px. Dort gilt deshalb eine hoehere Stufe, 208px, das sind
	 * 191 plus 16 Luft. Ohne sie stand die Bezeichnung bis 39px
	 * tief im Sektionstitel.
	 */
	--ge-leiste-platz: 208px;

	/* ---------------------------------------------------------------
	 * 8. Kanten
	 *
	 * Radius 4px auf Buttons und Formularfeldern, 0 auf allem
	 * anderen. Screenshots und Karten sind rechteckig.
	 * Kein Schatten, kein Verlauf, kein Weichzeichner.
	 * ------------------------------------------------------------- */
	--ge-radius: 4px;
	--ge-radius-flaeche: 0;
	--ge-haarlinie: 1px;

	/* Einfarbig im Akzent, ein Ring fuer alles. */
	--ge-fokus-breite: 2px;
	--ge-fokus-abstand: 3px;

	/* ---------------------------------------------------------------
	 * 9. Bewegung
	 * ------------------------------------------------------------- */
	--ge-dauer-schnell: 160ms;
	--ge-dauer: 320ms;
	--ge-kurve: cubic-bezier(.2, .6, .2, 1);

	/* ---------------------------------------------------------------
	 * 10. Stapelreihenfolge
	 * ------------------------------------------------------------- */
	--ge-z-leiste: 40;
	--ge-z-menue: 65;
	--ge-z-kopf: 70;
	--ge-z-sprunglink: 100;

	/* ---------------------------------------------------------------
	 * 11. Kopfleiste
	 * ------------------------------------------------------------- */
	--ge-kopf-hoehe: 88px;
	--ge-kopf-hoehe-klein: 56px;
}

/*
 * Haltepunkte, als Kommentar dokumentiert, weil Custom Properties
 * in Media Queries nicht auswertbar sind.
 *
 *   360px   kleinste unterstuetzte Breite
 *   640px   Karten gehen von einer auf zwei Spalten
 *   900px   Schaukasten pinnt, Screenshot rueckt neben den Text
 *   1100px  Sektionsleiste erscheint
 *   1240px  Inhaltsbreite ist ausgereizt
 */

/*
 * Ab hier traegt die Zentrierung: bei 1400px liegt die Inhaltsspalte
 * schon 72px vom Rand, zusammen mit 140px Einzug bleibt das laengste
 * Label frei. Nachgemessen, nicht geschaetzt.
 */
@media (min-width: 1400px) {
	:root {
		--ge-leiste-platz: 140px;
	}
}