@layer tokens, base, layout, components, pages, utilities;

/*
 * Design-Tokens Frontend (docs/design-system-v3.md Kap. 2, Werte der v2-Startseite).
 * Einzige Quelle für Farben, Schriften, Abstände, Radien und Schatten im Theme.
 * Gleiche Namen wie ksb-core/assets/css/tokens.css (Backend-Teilmenge).
 *
 * Breakpoints (in @media keine Variablen möglich): 600px Mobile↔Tablet, 900px Tablet↔Desktop,
 * 1200px Kopf kompakt. Kopf-Navigation klappt zusätzlich per JS um (wie v2, ResizeObserver).
 *
 * Kaskaden-Ebenen: tokens → base → layout → components → pages → utilities.
 * Spätere Ebene gewinnt immer, darum kein !important nötig. Ausnahme: CSS ohne Ebene
 * (Leaflet aus ksb-core) gewinnt immer – Karten-Anpassungen stehen deshalb in karte.css ohne Ebene.
 */
@layer tokens {
	:root {
		/* Marke */
		--ksb-green:       #3D6B40;
		--ksb-green-deep:  #2C5230;
		--ksb-green-pale:  #EAF2EB;
		--ksb-green-mid:   #D4E4D4;   /* Platzhalter-Verlauf Bahn-Kachel (v2 #d4e4d4) */
		--ksb-green-light: #5A8F5E;   /* Popup-Platzhalter-Verlauf (v2) */
		--ksb-yellow:      #FFBB00;
		--ksb-yellow-deep: #E8A300;
		--ksb-yellow-pale: #FFF6DC;

		/* Neutrale (warm) */
		--ksb-ink:         #3D455E;
		--ksb-ink-soft:    #5B637E;
		--ksb-gold:        #7A6838;   /* v2 #897642, für WCAG AA dunkler (design-system E3) */
		--ksb-paper:       #FFFDF7;
		--ksb-cream:       #FAF6EC;
		--ksb-line:        #E8DFC9;
		--ksb-line-soft:   #F1E9D4;
		--ksb-line-strong: #8C8471;   /* Rahmen Eingabefelder */
		--ksb-stripe-a:    #F2E7C2;   /* Platzhalter-Streifen (v2) */
		--ksb-stripe-b:    #EFE0B0;

		/* Auf dunklem Grund (Tinte) */
		--ksb-on-dark:       #FFFDF7;
		--ksb-on-dark-soft:  rgb(255 253 247 / .82);
		--ksb-on-dark-muted: rgb(255 253 247 / .72);
		--ksb-on-dark-line:  rgb(255 253 247 / .15);
		--ksb-on-dark-fill:  rgb(255 253 247 / .06);
		--ksb-on-dark-hover: rgb(255 253 247 / .12);
		--ksb-overlay:       rgb(20 18 12 / .96);   /* Galerie-Lightbox (v2) */
		--ksb-backdrop:      rgb(61 69 94 / .18);   /* hinter Menü-Overlay (v2) */

		/* Spezial */
		--ksb-badge-geheimtipp: #1A3A4A;
		--ksb-badge-gefaehrdet: #4A4A3A;
		--ksb-pin-ort:          #F1C40F;   /* Orte (v2 Karte) */
		--ksb-pin-ort-text:     #6B5300;
		--ksb-pin-ort-rand:     #C9A800;
		--ksb-tour:             #C0392B;   /* Aktivitäten-Pins/Cluster (v2 rot) */
		--ksb-ort-akzent:       #A85A3C;   /* Orte-Popup Akzent (v2 Terrakotta #c4704f, dunkler für AA) */
		--ksb-diff-mittel:      #B7791F;
		--ksb-diff-schwer:      #B3261E;
		--ksb-warn:             #8A5A00;
		--ksb-warn-bg:          #FCF1D6;

		/* Schriften (lokal, assets/css/fonts.css) */
		--ksb-font-display: "Roboto", system-ui, sans-serif;
		--ksb-font-text:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

		--ksb-fs-xs:   12px;
		--ksb-fs-sm:   13px;
		--ksb-fs-ui:   14px;
		--ksb-fs-base: 16px;
		--ksb-fs-md:   18px;
		--ksb-fs-lg:   22px;
		--ksb-fs-lede: clamp(15px, 2vw, 18px);
		--ksb-fs-h3:   clamp(20px, 2vw, 26px);
		--ksb-fs-h2:   clamp(32px, 3.8vw, 48px);
		--ksb-fs-h1:   clamp(40px, 5.4vw, 66px);
		--ksb-fs-stat: 44px;

		--ksb-lh-display: 1.06;
		--ksb-lh-title:   1.2;
		--ksb-lh-text:    1.55;
		--ksb-lh-prose:   1.65;
		--ksb-ls-display: -0.015em;
		--ksb-ls-title:   -0.01em;
		--ksb-ls-caps:    0.14em;
		--ksb-ls-eyebrow: 0.18em;

		/* Abstände */
		--ksb-space-1: 4px;
		--ksb-space-2: 8px;
		--ksb-space-3: 12px;
		--ksb-space-4: 16px;
		--ksb-space-5: 24px;
		--ksb-space-6: 32px;
		--ksb-space-7: 48px;
		--ksb-space-8: 64px;
		--ksb-space-9: 72px;
		--ksb-space-10: 112px;
		--ksb-section-y: 110px;   /* v2 Sektionen 110 / 72 / 48 */
		--ksb-container: 1140px;
		--ksb-container-wide: 1340px;
		--ksb-gutter: 24px;
		--ksb-measure: 680px;

		/* Radien */
		--ksb-radius-xs:   2px;
		--ksb-radius-sm:   4px;
		--ksb-radius-card: 6px;   /* v2 Bahn-Kachel */
		--ksb-radius-md:   8px;
		--ksb-radius-lg:   12px;
		--ksb-radius-popup: 14px; /* v2 Karten-Popup v3-Stand */
		--ksb-radius-pill: 999px;

		/* Schatten (warm) */
		--ksb-shadow-xs:    0 2px 8px rgb(0 0 0 / .05);
		--ksb-shadow-sm:    0 2px 8px rgb(60 55 30 / .06);
		--ksb-shadow-md:    0 8px 24px rgb(60 55 30 / .10);
		--ksb-shadow-lg:    0 20px 44px rgb(60 55 30 / .18);
		--ksb-shadow-card:  0 18px 40px rgb(60 55 30 / .10);
		--ksb-shadow-hover: 0 8px 32px rgb(61 107 64 / .12);
		--ksb-shadow-chip:  0 4px 16px rgb(61 107 64 / .12);
		--ksb-shadow-popup: 0 10px 28px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .06);
		--ksb-shadow-ctrl:  0 4px 12px rgb(0 0 0 / .08);
		--ksb-focus:        0 0 0 3px var(--ksb-paper), 0 0 0 5px var(--ksb-green);
		--ksb-transition:   .15s ease;

		/* Kopf */
		--ksb-header-linie: 4px;
	}

	@media (max-width: 900px) {
		:root {
			--ksb-section-y: 72px;
		}
	}

	@media (max-width: 600px) {
		:root {
			--ksb-section-y: 48px;
			--ksb-gutter: 16px;
		}
	}
}