/* =========================================================
 * Tierisch gut therapiert – Design-Tokens
 * Quelle: colors_and_type.css (Designsystem, verbindlich)
 * Kuehle Blau-/Grau-Palette, Roboto, Font Awesome 6.
 * ========================================================= */

:root {

	/* ---------- FLAECHEN ---------- */
	--tgt-mist:        #EEF2F5;   /* Seitenhintergrund */
	--tgt-paper:       #F8FAFC;   /* Kartenflaeche */
	--tgt-paper-2:     #DEE5EB;   /* Inset, Tabellenstreifen */

	/* ---------- PRIMAERFARBE (Stahlblau) ---------- */
	--tgt-steel:       #4A6B82;
	--tgt-steel-deep:  #2F4A5C;   /* Hover, Pressed, Betonung */
	--tgt-steel-soft:  #C4D4DF;   /* Tints, Badge-Hintergrund */
	--tgt-steel-tint:  #E8EFF4;   /* dezenter Schleier */

	/* ---------- SEKUNDAERFARBE (Petrol) ---------- */
	--tgt-teal:        #6C8E94;
	--tgt-teal-deep:   #4A6F75;
	--tgt-teal-soft:   #CFDDDF;

	/* ---------- TEXT (Schiefer) ---------- */
	--tgt-slate:       #2E3A44;   /* Primaertext */
	--tgt-slate-soft:  #6B7A85;   /* Sekundaertext, Captions */
	--tgt-slate-mute:  #98A4AE;   /* Platzhalter, deaktiviert */

	/* ---------- LINIEN ---------- */
	--tgt-line:        #D6DEE5;
	--tgt-line-strong: #B4BFC9;

	/* ---------- SEMANTIK ---------- */
	--tgt-success:     #4F8A8B;
	--tgt-warning:     #C9B458;
	--tgt-danger:      #B05C7A;
	--tgt-info:        #4A6B82;

	/* ---------- AUSWAHL ---------- */
	--tgt-selection-bg: #C4D4DF;
	--tgt-selection-fg: #2E3A44;

	/* ---------- TYPOGRAFIE ---------- */
	--tgt-font:        "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tgt-font-icon:   "Font Awesome 6 Free", "Font Awesome 6 Brands";

	--tgt-fw-light:    300;
	--tgt-fw-regular:  400;
	--tgt-fw-medium:   500;
	--tgt-fw-bold:     700;

	/* Skala – 1.2 / 1.125 (Display per clamp responsiv) */
	--tgt-fs-display:  clamp(40px, 5.5vw, 64px);
	--tgt-fs-h1:       clamp(32px, 4vw, 44px);
	--tgt-fs-h2:       clamp(26px, 3vw, 34px);
	--tgt-fs-h3:       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.1;
	--tgt-lh-heading:  1.2;
	--tgt-lh-body:     1.6;
	--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 ---------- */
	--tgt-radius-sm:   4px;
	--tgt-radius-md:   8px;
	--tgt-radius-lg:   12px;
	--tgt-radius-xl:   14px;
	--tgt-radius-2xl:  20px;
	--tgt-radius-pill: 999px;

	/* ---------- ELEVATION (kuehler Schiefer-Tint) ---------- */
	--tgt-elev-0: none;
	--tgt-elev-1: 0 1px 2px rgba(46, 58, 68, .05);
	--tgt-elev-2: 0 6px 16px rgba(46, 58, 68, .08);
	--tgt-elev-3: 0 18px 40px rgba(46, 58, 68, .14);

	/* ---------- 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;
}