/*
 * CW Design-Tokens — zentrale Gestaltungswerte für codewerk.de
 *
 * Referenzstil sind die aktuellen Seiten DPP und CRA. Ältere Seitenstile
 * (Tab-Slider, Whitepaper-Formular, Main-Slider) sind bewusst NICHT
 * eingeflossen; wo sie abweichende Werte verwenden, gewinnt der hier
 * festgelegte Token.
 *
 * Diese Datei wird global geladen. Sie definiert ausschließlich Variablen
 * und setzt selbst keine Regeln — sie kann deshalb nichts überschreiben
 * und ist gefahrlos site-weit einsetzbar.
 *
 * Wer freies HTML schreibt, benutzt diese Variablen statt fester Farbwerte.
 * Die Namen sind in der Element-Übersicht und im geteilten Skill dokumentiert.
 */

:root {
	/* --- Marke ------------------------------------------------------- */

	/* Primäres Dunkelblau. Gewinnt gegen #002B5C aus dem alten Tab-Slider. */
	--cw-color-navy: #022B4D;
	/* Dunklere Variante, vor allem für Hover-Zustände. */
	--cw-color-navy-dark: #172D49;
	/* Signature-Grün. Gewinnt gegen #88D444 und #99e63a aus Altkomponenten. */
	--cw-color-green: #9EFC4F;
	/* Abgetieftes Grün für Symbole auf hellem Grün-Hintergrund (Kontrast). */
	--cw-color-green-deep: #6FBF2E;
	/*
	 * Icon-Grün der Ablaufschritte. Weicht minimal vom Marken-Grün ab und ist
	 * der Standardwert des Process-Steps-Widgets (siehe
	 * assets/css/cw-process-steps.css). Steht hier, damit der Wert einen Namen
	 * hat und auffindbar ist — nicht als vierte Markenfarbe gedacht. Wenn das
	 * Widget-Grün irgendwann auf das Marken-Grün gezogen wird, fällt dieser
	 * Token weg.
	 */
	--cw-color-green-icon: #92EC40;

	/* --- Text und Flächen -------------------------------------------- */

	/* Fließtextfarbe, gedeckter als das Navy. */
	--cw-color-copy: #355571;
	/* Gedämpftes Blaugrau für inaktive Zustände. */
	--cw-color-inactive: #9AAAB8;
	--cw-color-white: #FFFFFF;
	/* Weiche Hintergrundfläche für Karten und Abschnitte. */
	--cw-color-soft: #F2F2F2;
	/* Helles Grau für Trennlinien und neutrale Flächen. */
	--cw-color-grey-light: #E6EAED;

	/* --- Typografie --------------------------------------------------- */

	--cw-font-family: "Barlow", -apple-system, system-ui, sans-serif;
	--cw-font-weight-light: 300;
	--cw-font-weight-regular: 400;
	--cw-font-weight-medium: 500;
	--cw-font-weight-bold: 700;

	--cw-fs-body: 16px;
	--cw-fs-body-lg: 18px;
	--cw-fs-h3: 20px;
	--cw-fs-h2: clamp(26px, 3vw, 36px);
	--cw-fs-h1: clamp(32px, 4vw, 48px);

	--cw-lh-tight: 1.2;
	--cw-lh-normal: 1.4;
	--cw-lh-loose: 1.6;

	/* --- Abstände (8er-Basis) ----------------------------------------- */

	--cw-space-1: 8px;
	--cw-space-2: 12px;
	--cw-space-3: 16px;
	--cw-space-4: 20px;
	--cw-space-5: 24px;
	--cw-space-6: 32px;
	--cw-space-7: 40px;
	--cw-space-8: 64px;

	/* --- Layout -------------------------------------------------------- */

	/* Vereinheitlicht die bisherigen Werte 1170 / 1190 / 1200 / 1206 px. */
	--cw-container-max: 1200px;
	--cw-container-pad: 20px;

	/* --- Radien, Schatten, Übergänge ----------------------------------- */

	/* 24 px ist der Marken-Radius für Karten und größere Flächen. */
	--cw-radius-lg: 24px;
	--cw-radius-md: 12px;
	--cw-radius-sm: 6px;
	--cw-radius-pill: 999px;

	/* Der einzige im aktuellen Stil verwendete Schatten. */
	--cw-shadow-default: 0 12px 75px rgba(0, 0, 0, 0.16);

	--cw-transition-default: 0.2s ease;
}

/*
 * Breakpoints stehen bewusst nicht als Variablen hier: Media Queries können
 * keine Custom Properties auswerten. Verbindlich sind
 *   Mobil   bis 767px
 *   Tablet  768px bis 1024px
 *   Desktop ab 1025px
 * Diese drei Grenzen sind im geteilten Skill festgehalten.
 */