/**
 * Design-Tokens Schlauerland.IT
 *
 * Uebernommen aus dem Designsystem der Next-Seite. Quelle der Wahrheit fuer die
 * Begruendung der drei Korrektur-Tokens:
 * /root/projects/schlauerland-web/docs/design-plan.md, Abschnitt 3.3
 *
 * Regel: Es wird ausschliesslich mit den SEMANTISCHEN Tokens gestylt.
 * Die Basis-Tokens tauchen in keiner Komponente auf.
 */

:root {
	/* --- Basis --- */
	--schiefer: #232b31;
	--schiefer-2: #313b43;
	--nebel: #eceee9;
	--fichte: #2f5d4e;
	--signal: #e8b33c;
	--kalk: #b9c2bc;

	/* --- WCAG-Korrekturen. Gemessene Ratios, nicht geschaetzt. ---
	   fichte auf schiefer 1,91:1 -> im Dark Mode nie Textfarbe
	   kalk   auf nebel    1,56:1 -> Light-Mode-Muted waere unlesbar
	   signal auf nebel    1,64:1 -> verfehlt sogar die 3,0:1 fuer Fokusringe */
	--fichte-hell: #6fa890;   /* 5,26:1 auf schiefer */
	--kalk-dunkel: #5a6763;   /* 5,06:1 auf nebel */
	--signal-dunkel: #7a5a0e; /* 5,45:1 auf nebel */

	/* --- Semantisch. Dark ist Page-Theme. --- */
	--surface: var(--schiefer);
	--surface-elevated: var(--schiefer-2);
	--text-primary: var(--nebel);
	--text-muted: var(--kalk);
	--accent: var(--signal);
	--accent-on: var(--schiefer); /* Text auf Akzentflaeche, 7,49:1 */
	--line: #3a444a;              /* Hairline, dekorativ */
	--line-strong: #4e5b62;       /* Hairline, bedeutungstragend */
	--focus: var(--signal);

	/* --- Form. Shape Lock: genau ein Radius, ueberall. --- */
	--radius: 3px;

	/* --- Layout --- */
	--header-h: 68px;
	--container-page: 1400px;
	--measure: 68ch;

	/* --- Bewegung. Genau eine Kurve im ganzen Design. --- */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme='light'] {
	--surface: var(--nebel);
	--surface-elevated: #e3e6e0;
	--text-primary: var(--schiefer);
	--text-muted: var(--kalk-dunkel);
	--accent: var(--signal-dunkel);
	--accent-on: var(--nebel);
	--line: #cbd1cb;
	--line-strong: #a7b0aa;
	--focus: var(--signal-dunkel);
}

/**
 * Theme Lock: Sektionen invertieren nie. Es gibt genau zwei Flaechenwerte
 * innerhalb desselben Themes, und die kommen aus --surface / --surface-elevated.
 */
.sl-flaeche-surface {
	background-color: var(--surface);
}

.sl-flaeche-elevated {
	background-color: var(--surface-elevated);
}