/**
 * isarcode Design-Tokens, die EINE Single Source of Truth.
 *
 * Build-frei: Diese Datei wird direkt gepflegt (kein LESS/grunt mehr). Sie laedt
 * NACH der Base (isarcode-merged.min.css, Handle "isrcd-base") und gewinnt damit
 * gegen den dort noch eingefrorenen, kompilierten :root-Block. Wer einen Token
 * aendern will, aendert ihn HIER, nicht in der minifizierten Base.
 *
 * Aufbau:
 *   1. Foundation  Fonts, Gewichte, Farben, Cursor (werte-identisch zur Legacy-Base)
 *   2. Layout      Seitenrand (responsiv), Sektions-/Modul-/Textbreiten
 *   3. Rhythmus    Spacing-Scale, Radien
 *   4. Referenz    Breakpoints + Block-zu-Token-Mapping (Doku, kein aktiver Code)
 *
 * Farben sind RGB-Tripel (ohne rgb()-Wrapper), damit Alpha via rgb(var(--x), a)
 * gemischt werden kann. Dark/Light-Mode tauscht --primary-color/--secondary-color.
 */

:root {
	/* ============================ 1. Foundation ============================ */
	--font-prime-family: "GT America", 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-prime-weight: 200;
	--font-prime-weight-h: 500;
	--font-prime-weight-bold: 600;
	--font-option-family: 'kepler-std', serif;
	--font-option-weight: 300;

	--color-w: 236, 241, 254;   /* Hellton (Hintergrund hell / Text dunkelmodus) */
	--color-blk: 36, 30, 36;    /* Dunkelton (Text hell / Hintergrund dunkelmodus) */

	--primary-color: var(--color-blk);
	--secondary-color: var(--color-w);
	--08-color: #4C4850;        /* Graustufen-Skala (Deko, SVG-Shades) */
	--06-color: #74737C;
	--04-color: #9C9DA7;
	--02-color: #C5C7D3;
	--alert-color: #F5093B;

	--cursor-cross-w: url(../img/icon_cross_w.svg);
	--cursor-cross-blk: url(../img/icon_cross_blk.svg);
	--cursor-cross: var(--cursor-cross-blk);

	--spacing-h: 80px;
	--header-height: 80px;

	/* ============================ 2. Layout ============================ */
	/* Seitenrand: schmal auf Mobile, weit auf Desktop (Steps siehe unten). */
	--page-padding: 1rem;

	/* Breiten-Tokens. Sektionen sind per Default full-bleed (nur --page-padding-
	   Rand); diese Maxima begrenzen Inhalt dort, wo Lesbarkeit/Optik es verlangt. */
	--isrcd-content-max: 86rem;   /* max. Sektions-Inhaltsbreite (vor --page-padding) */
	--isrcd-module-max: 76rem;    /* breite Module: Stat-Band, Bento, Galerie */
	--isrcd-text-max: 52rem;      /* lesbare Fliesstext-Spalte (Kopf, Text, Infobox, TL;DR) */
	--isrcd-text-rail: 2.75rem;   /* Einrueckung der Textspalte (Marker-Rail) */

	/* ============================ 3. Rhythmus ============================ */
	--isrcd-space-xs: 0.5rem;
	--isrcd-space-s: 1rem;
	--isrcd-space-m: 1.5rem;
	--isrcd-space-l: clamp(2rem, 4vw, 3.5rem);
	--isrcd-space-xl: clamp(3rem, 7vw, 6rem);

	--isrcd-radius-s: 6px;
	--isrcd-radius-m: 10px;
	--isrcd-radius-l: 14px;
}

/* Responsiver Seitenrand. @media kann keine Variablen lesen, darum hier als
   harte Steps, identisch zur Legacy-Base. Token bleibt die einzige Stellschraube. */
@media screen and (min-width: 1200px) {
	:root {
		--page-padding: 3rem;
		--isrcd-text-rail: 3.25rem;
	}
}

/* ============================ 4. Referenz (Doku) ============================
 *
 * Breakpoints (theme-konform, in jeder CSS-Datei identisch verwenden):
 *   --bp-s:   600px
 *   --bp-m:   768px
 *   --bp-l:  1024px
 *   --bp-xl: 1200px   (Seitenrand wechselt auf 3rem)
 *   --bp-xxl:1400px
 *
 * Block-zu-Breiten-Mapping (welcher Token regelt die Breite welchen Bausteins):
 *   acf/section-hero        full-bleed (100vh, nur --page-padding)
 *   acf/section-content     full-bleed; Fliesstext darin -> --isrcd-text-max
 *   acf/section-3cols       full-bleed Grid
 *   acf/section-services    full-bleed
 *   acf/section-solutions   full-bleed
 *   acf/section-projects    full-bleed
 *   acf/section-listing     full-bleed
 *   acf/section-gallery     -> --isrcd-module-max
 *   acf/section-contactform full-bleed (eigene Zentrierung)
 *   Artikel-Module (TL;DR, Infobox)   -> --isrcd-text-max + --isrcd-text-rail
 *   Artikel-Module (Stat, Bento)      -> --isrcd-module-max
 */