/* ============================================================
   SENIORENWOHNKOMPASS — DESIGN TOKENS

   Die einzige Stelle, an der Farben, Typografie, Abstaende, Radien, Schatten und
   Zeiten definiert werden. Wird vor jedem anderen Stylesheet geladen; keine andere
   Datei deklariert Variablen.

   Diese Datei ist zugleich das Design-System. Es lag bis 2026-07-29 zusaetzlich unter
   design-system/tokens/ — zwei Dateien mit denselben Werten, die prompt auseinander-
   liefen: dort stand noch --swk-color-text-muted: #8A8580 (3.42:1, unter WCAG AA) und
   ein blauer Sonder-Fokusring #005FCC, den es live nicht mehr gab. Deshalb nur noch
   diese eine.

   Kontraste (Text auf Creme #FAF7F2): text-dark 15.58:1 · text-body 8.64:1 ·
   text-card 8.00:1 · text-muted 5.38:1 · link 5.88:1 · link-hover 8.65:1.
   Alle ueber WCAG AA (4.5:1). Werte vor einer Farbaenderung nachrechnen.
   ============================================================ */

:root {
	/* ============================================================
	   FARBEN — Primaer (Terrakotta)
	   ============================================================ */
	--swk-color-primary:          #D8704F; /* Marken-Primaerfarbe, Akzentlinien, CTA-Hover */
	--swk-color-primary-dark:     #B85A3D; /* CTA-Buttons, Links (Default) */
	--swk-color-primary-light:    #E89578;
	--swk-color-primary-hover:    #9A4830; /* Button-Hover-Hintergrund */
	--swk-color-primary-darkest:  #7A3020; /* Skip-Link-Hintergrund, Link-Hover */

	/* Linktext traegt eigene Toene: auf hellem Grund gelten andere Kontraste als auf
	   einer gefuellten Flaeche. Hover wird dunkler, nicht heller. */
	--swk-color-link:             #9A4830; /* Linktext Ruhezustand (5.88:1 auf Creme) */
	--swk-color-link-hover:       #7A3020; /* Linktext Hover (8.65:1 auf Creme) */

	/* ============================================================
	   FARBEN — Sekundaer (Olivgruen)
	   ============================================================ */
	--swk-color-secondary:        #8A9A5B; /* aktive Kacheln, Trust-Icons */
	--swk-color-secondary-dark:   #6F7D48;
	--swk-color-secondary-tint:   #F5F8F0; /* heller Olive-Hintergrund (aktiv/hover) */

	/* ============================================================
	   FARBEN — Akzent (Warmes Gold)
	   ============================================================ */
	--swk-color-accent:           #D4A574; /* Footer-Headings */

	/* ============================================================
	   FARBEN — Hintergruende
	   ============================================================ */
	--swk-color-bg-sand:          #F5EDE3; /* Sektions-Hintergrund, Bild-Platzhalter */
	--swk-color-bg-cream:         #FAF7F2; /* hellerer Sektions-Hintergrund */
	--swk-color-bg-white:         #FFFFFF;

	/* ============================================================
	   FARBEN — Text (warme Toene)
	   ============================================================ */
	--swk-color-text-dark:        #2C1A0E; /* Headlines, Footer-Hintergrund */
	--swk-color-text-body:        #4A4743; /* Fliesstext, Navbar-Links */
	--swk-color-text-card:        #4E4C4A; /* Card-Beschreibungen/Excerpts */
	--swk-color-text-muted:       #6B6560; /* sekundaerer/leiser Text (5.38:1 auf Creme) */
	--swk-color-text-trust:       #3A3533; /* Trust-Signal-Text */

	/* ============================================================
	   FARBEN — Footer (auf dunklem Grund)
	   ============================================================ */
	--swk-color-footer-desc:      #B8A898;
	--swk-color-footer-copyright: #C8BAB0;
	--swk-color-footer-divider:   #3D2A1A;

	/* ============================================================
	   FARBEN — Linien / Fokus
	   ============================================================ */
	--swk-color-border:           #D8CFC1; /* Card-/Navbar-Rahmen */
	--swk-color-focus:            #2C1A0E; /* Standard-Fokusring (dunkel) */
	--swk-color-focus-on-dark:    #FFFFFF; /* Fokusring auf dunklem Grund (Footer) */
	--swk-color-focus-tile:       #2C1A0E; /* Fokusring Category-Tiles */

	/* ============================================================
	   TYPOGRAFIE — Font Families
	   ============================================================ */
	--font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;       /* Body */
	--font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;                         /* Headlines */

	/* Verfuegbare Gewichte: DM Sans 400/500/600/700 · Source Serif 4 400/600/700 */
	--swk-fw-regular:  400;
	--swk-fw-medium:   500;
	--swk-fw-semibold: 600;
	--swk-fw-bold:     700;

	/* ============================================================
	   TYPOGRAFIE — Font Sizes (Skala aus tatsaechlicher Nutzung)
	   ============================================================ */
	--swk-fs-xs:   14px; /* Mobile-Nav-Heading */
	--swk-fs-sm:   15px; /* Copyright */
	--swk-fs-base: 16px; /* Footer-Text/-Links */
	--swk-fs-md:   17px; /* Card-Text, Kadence-Body */
	--swk-fs-lg:   18px; /* Navbar-Links, Buttons, Trust */
	--swk-fs-xl:   20px; /* Body-Wrapper, Post-Titel */
	--swk-fs-2xl:  22px; /* Hero-Subline, Navbar-Logo, Footer-Logo */
	--swk-fs-3xl:  28px; /* Section-Headline (mobil) */
	--swk-fs-4xl:  32px; /* Hero-Headline (mobil) */
	--swk-fs-5xl:  36px; /* Section-Headline (desktop) */
	--swk-fs-6xl:  40px; /* Hero-Headline (tablet) */
	--swk-fs-7xl:  54px; /* Hero-Headline (desktop) */

	/* ============================================================
	   TYPOGRAFIE — Line Heights
	   ============================================================ */
	--swk-lh-display: 1.2; /* Hero/Display */
	--swk-lh-title:   1.3; /* Card-Titel */
	--swk-lh-snug:    1.5; /* Card-Text */
	--swk-lh-body:    1.6; /* Fliesstext */

	/* ============================================================
	   SPACING — Skala (px, aus tatsaechlicher Nutzung)
	   ============================================================ */
	--swk-space-1:   4px;
	--swk-space-2:   8px;
	--swk-space-3:   12px;
	--swk-space-4:   16px;
	--swk-space-5:   20px;
	--swk-space-6:   24px;
	--swk-space-8:   32px;
	--swk-space-10:  40px;
	--swk-space-12:  48px;
	--swk-space-14:  56px;
	--swk-space-16:  64px;
	--swk-space-20:  80px;  /* horizontale Sektions-/Container-Polsterung (desktop) */
	--swk-space-35:  140px; /* Hero vertikal (desktop) */

	/* ============================================================
	   LAYOUT
	   ============================================================ */
	--swk-container-max: 1280px; /* Marken-Container (Homepage/Footer) */
	--swk-chip-max:      240px;  /* Maximalbreite eines Kategorie-Chips */
	--swk-touch-min:     48px;   /* WCAG-Mindestgroesse Touch-Targets (Alias: --touch-min) */
	--touch-min:         48px;

	/* Breakpoints (zur Referenz — CSS-Vars greifen nicht in @media,
	   daher hier nur dokumentiert; Werte siehe STYLEGUIDE.md):
	   mobile <= 640px · tablet <= 1024px · desktop >= 1024px (Nav-Switch bei 768px) */

	/* ============================================================
	   RADIEN
	   ============================================================ */
	--radius-sm:     4px;  /* Fokusring-Radius, kleine Elemente */
	--radius-md:     12px; /* Cards, Dropdown, Sub-Tiles */
	--radius-button: 8px;  /* Buttons */

	/* ============================================================
	   SCHATTEN
	   ============================================================ */
	--shadow-sm:       0 1px 2px rgba(42, 36, 32, 0.05);
	--shadow-md:       0 4px 6px rgba(42, 36, 32, 0.08);
	--shadow-lg:       0 10px 15px rgba(42, 36, 32, 0.1);
	--shadow-dropdown: 0 10px 25px rgba(42, 36, 32, 0.12);
	--shadow-focus:    0 0 0 3px #FFFFFF, 0 0 0 6px #2C1A0E;

	/* ============================================================
	   MOTION
	   ============================================================ */
	--duration-fast: 200ms;
	--duration-base: 300ms;
	--ease-default:  ease-out;
}