/* =========================================================
 * Tierisch gut therapiert – Design-Tokens „Himmelblau"
 * CI-Quelle: Schaufenster-Folierung (Juli 2026)
 * Cyan #29A9E0 = Identitätsfarbe (Kreise, Icons, Flächen)
 * Königsblau #16418C = Aktionsfarbe (Buttons, Links, CTA)
 * Fredoka (rund, Überschriften) + Rubik (Fließtext).
 * WICHTIG: Cyan auf Weiß ≈ 2,6:1 → nie für Fließtext oder
 * Button-Flächen; Textvariante ist --tgt-teal-deep (#0C6E9F).
 * ========================================================= */

:root {

	/* Die 8 Kernfarben folgen der Blocksy-Farbpalette
	   (Customizer → Allgemein → Farben) und sind dort selbst anpassbar.
	   Der zweite Wert ist der Fallback (z. B. im Block-Editor). */

	/* ---------- FLAECHEN ---------- */
	--tgt-mist:        var(--theme-palette-color-6, #FFFFFF);   /* Seitenhintergrund */
	--tgt-paper:       var(--theme-palette-color-7, #F6FAFD);   /* Kartenflaeche, helles Band */
	--tgt-paper-2:     #E4EEF6;   /* Inset, Tabellenstreifen */

	/* ---------- PRIMAERFARBE (Königsblau – Aktion) ---------- */
	--tgt-steel:       var(--theme-palette-color-1, #16418C);
	--tgt-steel-deep:  var(--theme-palette-color-2, #0E2F6B);   /* Hover, Pressed, Betonung */
	--tgt-steel-soft:  #D3EDF9;   /* Tints, Badge-Hintergrund (Himmelblau hell) */
	--tgt-steel-tint:  #EAF6FC;   /* dezenter Schleier (Himmelblau Schleier) */

	/* ---------- SEKUNDAERFARBE (Himmelblau – Identität) ---------- */
	--tgt-teal:        var(--theme-palette-color-3, #29A9E0);
	--tgt-teal-deep:   #0C6E9F;   /* textsichere Cyan-Variante (AA auf Weiß) */
	--tgt-teal-soft:   #D3EDF9;

	/* ---------- TEXT (Tinte) ---------- */
	--tgt-slate:       var(--theme-palette-color-4, #1C3554);   /* Primaertext */
	--tgt-slate-soft:  var(--theme-palette-color-5, #52667F);   /* Sekundaertext, Captions */
	--tgt-slate-mute:  #8FA3B8;   /* Platzhalter, deaktiviert */

	/* ---------- LINIEN ---------- */
	--tgt-line:        var(--theme-palette-color-8, #D9E6F0);
	--tgt-line-strong: #B9CCDD;

	/* ---------- SEMANTIK ---------- */
	--tgt-success:     #2E7D6B;
	--tgt-warning:     #C9A93E;
	--tgt-danger:      #B0507A;
	--tgt-info:        #16418C;

	/* ---------- AUSWAHL ---------- */
	--tgt-selection-bg: #D3EDF9;
	--tgt-selection-fg: #16418C;

	/* ---------- MARKE ---------- */
	--tgt-brand-tagline: "Tierphysiotherapie & Osteopathie";

	/* ---------- TYPOGRAFIE ---------- */
	--tgt-font:         "Rubik", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--tgt-font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
	--tgt-font-icon:    "Font Awesome 6 Free", "Font Awesome 6 Brands";

	--tgt-fw-light:    400;   /* Light entfaellt im Himmelblau-Design */
	--tgt-fw-regular:  400;
	--tgt-fw-medium:   500;
	--tgt-fw-bold:     500;   /* Rubik 700 wird nicht geladen – 500 ist das Maximum */
	--tgt-fw-display:  600;   /* Fredoka */

	/* Skala – 1.2 / 1.125 (Display per clamp responsiv) */
	--tgt-fs-display:  clamp(36px, 5vw, 56px);
	--tgt-fs-h1:       clamp(30px, 4vw, 42px);
	--tgt-fs-h2:       clamp(26px, 3vw, 34px);
	--tgt-fs-h3:       clamp(19px, 2.2vw, 22px);
	--tgt-fs-h4:       18px;
	--tgt-fs-kicker:   13px;
	--tgt-fs-body:     17px;
	--tgt-fs-body-sm:  15px;
	--tgt-fs-caption:  13px;
	--tgt-fs-meta:     12px;

	--tgt-lh-display:  1.12;
	--tgt-lh-heading:  1.2;
	--tgt-lh-body:     1.65;
	--tgt-lh-tight:    1.35;

	--tgt-ls-kicker:   0.16em;
	--tgt-ls-tight:    -0.01em;

	/* ---------- ABSTAENDE (4px-Basis) ---------- */
	--tgt-space-1:  4px;
	--tgt-space-2:  8px;
	--tgt-space-3:  12px;
	--tgt-space-4:  16px;
	--tgt-space-5:  24px;
	--tgt-space-6:  32px;
	--tgt-space-7:  48px;
	--tgt-space-8:  64px;
	--tgt-space-9:  96px;
	--tgt-space-10: 128px;

	/* ---------- RADIEN (rund = CI) ---------- */
	--tgt-radius-sm:   8px;
	--tgt-radius-md:   12px;
	--tgt-radius-lg:   18px;
	--tgt-radius-xl:   24px;
	--tgt-radius-2xl:  32px;
	--tgt-radius-pill: 999px;

	/* ---------- ELEVATION (navy-getoent, weich) ---------- */
	--tgt-elev-0: none;
	--tgt-elev-1: 0 1px 3px rgba(22, 65, 140, .08);
	--tgt-elev-2: 0 8px 24px rgba(22, 65, 140, .10);
	--tgt-elev-3: 0 16px 48px rgba(22, 65, 140, .14);

	/* ---------- VERLAEUFE ---------- */
	--tgt-gradient-hero:  linear-gradient(165deg, #FFFFFF 30%, #EAF6FC 100%);
	--tgt-gradient-steel: linear-gradient(135deg, #16418C 0%, #0E2F6B 100%);

	/* ---------- BEWEGUNG ---------- */
	--tgt-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--tgt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--tgt-dur-fast:    120ms;
	--tgt-dur-base:    180ms;
	--tgt-dur-slow:    300ms;
	--tgt-dur-photo:   400ms;

	/* ---------- LAYOUT ---------- */
	--tgt-content-max:   1200px;
	--tgt-content-prose: 68ch;
}