/* ============================================================
   Das Gehalts-Duell – Design-Tokens
   ------------------------------------------------------------
   news.jobwoche.de (Theme mh-magazine) bringt keine eigenen
   CSS-Variablen mit. Deshalb steht hier ein eigenes Set.
   Die Werte stammen aus der bereits auf der Seite verwendeten
   JOBWOCHE-Palette (siehe Plugin jobwoche-kiakademie).

   UMSTELLEN AUF SEITENWERTE:
   Sobald das Theme eigene Variablen liefert, genügt eine Zeile
   je Token, z. B.:
       --gd-teal: var(--jw-primary, #10A595);
   Der ganze Rest des Moduls greift nur auf --gd-* zu.
   ============================================================ */

:root {
	/* Marke */
	--gd-teal: #10A595;
	--gd-teal-dark: #0B7E72;
	--gd-teal-tint: #E3F6F2;

	/* Spielsignale: warm für richtig, klares Rot für falsch */
	--gd-ok: #E08900;
	--gd-ok-soft: #FFF3DF;
	--gd-ok-ink: #7A4A00;
	--gd-bad: #D92D20;
	--gd-bad-soft: #FDECEA;
	--gd-bad-ink: #8F1D18;

	/* Helles Thema: Handy und Kiosk */
	--gd-bg: #ffffff;
	--gd-surface: #F3F8F8;
	--gd-card: #ffffff;
	--gd-ink: #14293b;
	--gd-muted: #5b6f7f;
	--gd-line: #d4dbe0;

	/* Schrift. Bevorzugt die Schrift der Seite; das Theme setzt keine
	   eigene Variable, daher Systemschrift – keine externe Anfrage,
	   kein Nachladen, sofortiger erster Bildaufbau. */
	--gd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gd-font-num: var(--gd-font);

	/* Maße */
	--gd-gap: 14px;
	--gd-radius: 20px;
	--gd-tap: 64px;          /* Mindestgröße für Touch-Ziele */
	--gd-shadow: 0 10px 30px rgba(11, 126, 114, .12);
	--gd-anim: 260ms;        /* alle Mikroanimationen bleiben unter 400 ms */
}

/* Dunkles Thema für den Großbildschirm. Wird über das Attribut
   data-gd-theme="dark" am <html> gesetzt. */
[data-gd-theme="dark"] {
	--gd-bg: #06191F;
	--gd-surface: #0B242C;
	--gd-card: #0E2A33;
	--gd-ink: #EAF4F3;
	--gd-muted: #9EBEBF;
	--gd-line: #1C4450;
	--gd-teal-tint: #103C3C;
	--gd-ok-soft: #3A2A05;
	--gd-bad-soft: #3A1310;
	--gd-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}