/**
 * Design-Tokens.
 *
 * Einzige Quelle für Farben, Abstände, Typo und Timings des Plugins.
 * Präfix aller Custom Properties: --ti-md-hfw-
 *
 * @package TiMd\Hfw
 */

/**
 * WICHTIG — Massstab
 *
 * Das Theme `sc` setzt die Root-Schriftgroesse fluid auf ca. 1 Pixel:
 *
 *     html  { font-size: var(--theme-font-size-root); }
 *     :root { --theme-font-size-root: calc(calc(100 / 1440) * 1vw); }
 *
 * In diesem Theme ist `1rem` also ungefaehr `1px` und skaliert mit der
 * Viewport-Breite. Standard-Annahmen wie `0.9375rem = 15px` ergeben hier
 * knapp 1 Pixel — Schrift und Abstaende waeren unsichtbar klein.
 *
 * Alle Groessen unten werden deshalb ueber `--ti-md-hfw-u` gebildet:
 * eine Einheit = ein Pixel im Referenz-Layout. Unsere Komponenten skalieren
 * damit automatisch mit dem Theme mit. Laeuft das Plugin jemals auf einem
 * Theme mit normaler Root-Groesse, ist genau EINE Zeile zu aendern:
 *
 *     --ti-md-hfw-u: 1px;
 *
 * Ausgenommen bleiben Haarlinien, Radien und Schatten — die stehen bewusst
 * in `px` und sollen nicht mitskalieren.
 */

:root {
	/* Eine Einheit = 1px im Referenz-Layout des Themes. */
	--ti-md-hfw-u: 1rem;

	/* --- Farben ------------------------------------------------------------
	 *
	 * Verweisen auf die Tokens des Themes `sc`, damit Header und
	 * Hilfsnavigation automatisch synchron bleiben. Der zweite Wert ist der
	 * Fallback, falls das Plugin ohne dieses Theme laeuft.
	 *
	 * Theme-Palette:
	 *   darkblue #00325b   blue #0090df   midblue #009ee3   lightblue #a1daf7
	 *   text #2e2e2e       darkgray #878989   lightgray #dadada   light #f2f2f2
	 */
	--ti-md-hfw-color-primary: var(--theme-color-midblue, #009ee3);
	--ti-md-hfw-color-primary-contrast: var(--theme-color-background, #ffffff);

	/* Hover: Die Flaeche bleibt gefuellt und wechselt nur den Blauton --
	   auf hellem Grund bliebe der Knopf sonst unsichtbar. Gilt fuer alle
	   CTAs des Plugins, damit sie sich wie der Header-CTA verhalten. */
	--ti-md-hfw-color-primary-hover-bg: var(--theme-color-darkblue, #00325b);
	--ti-md-hfw-color-primary-hover-text: var(--theme-color-background, #ffffff);

	/* Akzent fuer Ueberschriften und aktive Zustaende (Dunkelblau). */
	--ti-md-hfw-color-accent: var(--theme-color-accent, #00325b);

	--ti-md-hfw-color-text: var(--theme-color-text, #2e2e2e);
	--ti-md-hfw-color-text-muted: var(--theme-color-darkgray, #878989);
	--ti-md-hfw-color-surface: var(--theme-color-background, #ffffff);
	--ti-md-hfw-color-surface-alt: var(--theme-color-light, #f2f2f2);
	--ti-md-hfw-color-border: var(--theme-color-lightgray, #dadada);
	--ti-md-hfw-color-backdrop: rgb(0 50 91 / 45%);

	/* --- Typografie ------------------------------------------------------- */
	--ti-md-hfw-font-family: var(--theme-font-family, inherit);
	--ti-md-hfw-font-size-xs: var(--theme-font-size-smallest, calc(12 * var(--ti-md-hfw-u)));
	--ti-md-hfw-font-size-sm: var(--theme-font-size-small, calc(14 * var(--ti-md-hfw-u)));
	--ti-md-hfw-font-size-base: calc(16 * var(--ti-md-hfw-u));
	--ti-md-hfw-font-size-lg: var(--theme-font-size, calc(19 * var(--ti-md-hfw-u)));
	--ti-md-hfw-font-size-xl: calc(24 * var(--ti-md-hfw-u));

	/* Mini-Beschreibungen unter den Menuepunkten: bewusst eine Stufe
	   unter der kleinen Theme-Groesse, sonst dominieren sie den Titel. */
	--ti-md-hfw-font-size-subtitle: calc(14 * var(--ti-md-hfw-u));

	/* Dialoge (Suche, Kontakt) -- Masse aus dem Entwurf. */
	--ti-md-hfw-dialog-width: calc(708 * var(--ti-md-hfw-u));
	--ti-md-hfw-dialog-pad-block: calc(74 * var(--ti-md-hfw-u));
	--ti-md-hfw-dialog-pad-inline: calc(120 * var(--ti-md-hfw-u));
	--ti-md-hfw-dialog-radius: calc(10 * var(--ti-md-hfw-u));
	--ti-md-hfw-dialog-title-size: calc(40 * var(--ti-md-hfw-u));
	--ti-md-hfw-shadow-dialog: 0 0 20px rgb(0 50 91 / 18%);
	--ti-md-hfw-line-height: var(--theme-line-height, 1.47);
	--ti-md-hfw-font-weight-light: 300;
	--ti-md-hfw-font-weight-regular: 400;
	--ti-md-hfw-font-weight-medium: 500;
	--ti-md-hfw-font-weight-semibold: 600;
	--ti-md-hfw-font-weight-bold: 700;

	/* --- Abstände ---------------------------------------------------------- */
	--ti-md-hfw-space-3xs: calc(4 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-2xs: calc(8 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-xs: calc(12 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-sm: calc(16 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-md: calc(24 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-lg: calc(32 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-xl: calc(48 * var(--ti-md-hfw-u));
	--ti-md-hfw-space-2xl: calc(64 * var(--ti-md-hfw-u));

	/* --- Radien, Schatten, Rahmen ------------------------------------------ */
	--ti-md-hfw-radius-sm: 4px;
	--ti-md-hfw-radius-md: 8px;
	--ti-md-hfw-radius-pill: 100px; /* wie .theme-button */

	/* Grosse Rundung der Flyout-Panels laut Design. */
	--ti-md-hfw-radius-panel: calc(24 * var(--ti-md-hfw-u));

	/* Innenabstand der Flyout-Panels.
	   Er ist zugleich der seitliche Ueberstand des Panels ueber die
	   Inhaltsbreite (siehe --ti-md-hfw-panel-max). Beides aus derselben
	   Zahl zu bilden ist Absicht: Dadurch endet der Inhalt im Flyout genau
	   auf der Kante des regulaeren Seiteninhalts -- links wie rechts. */
	--ti-md-hfw-panel-padding: calc(48 * var(--ti-md-hfw-u));

	/* Aussenmass der Flyouts: Inhaltsbreite des Themes plus Polsterung. */
	--ti-md-hfw-panel-max:
		calc(
			var(--theme-layout-content-width-extrawide, calc(1360 * var(--ti-md-hfw-u)))
			+ 2 * var(--ti-md-hfw-panel-padding)
		);

	--ti-md-hfw-shadow-flyout: 0 24px 60px rgb(0 50 91 / 14%);
	--ti-md-hfw-shadow-rail: 0 4px 16px rgb(0 50 91 / 14%);

	/* --- Bewegung ---------------------------------------------------------- */
	--ti-md-hfw-duration-fast: 120ms;
	--ti-md-hfw-duration-base: 250ms;
	--ti-md-hfw-duration-slow: 350ms;
	--ti-md-hfw-easing: ease-in-out; /* wie --theme-transition */

	/* Weiche Kurve fuer Farbwechsel bei Hover: langsamer Ein- und Auslauf. */
	--ti-md-hfw-easing-soft: cubic-bezier(0.4, 0, 0.2, 1);

	/* Federnd, mit Ueberschwingen -- aus dem Entwurf uebernommen. */
	--ti-md-hfw-easing-spring: linear(0, 0.0985, 0.342, 0.6483, 0.9442, 1.1767, 1.3179, 1.364, 1.3302, 1.2427, 1.1314, 1.0233, 0.9377, 0.8853, 0.8675, 0.8791, 0.9105, 0.9509, 0.9904, 1.0219, 1.0414, 1.0482, 1.0443, 1.033, 1.0183, 1.0039, 0.9923, 0.9851, 0.9825, 0.9838, 0.9878, 0.9932, 0.9984, 1.0027, 1.0054, 1.0064, 1.0059, 1.0045, 1.0025, 1.0006, 0.9991, 0.9981, 0.9977, 0.9978, 0.9983, 0.9991, 0.9998, 1.0003, 1.0007, 1.0008, 1.0008);
	--ti-md-hfw-duration-spring: 700ms;

	/* --- Header ------------------------------------------------------------ */
	--ti-md-hfw-header-height: calc(84 * var(--ti-md-hfw-u));
	--ti-md-hfw-header-height-shrunk: calc(64 * var(--ti-md-hfw-u));
	--ti-md-hfw-mini-header-height: calc(34 * var(--ti-md-hfw-u));
	--ti-md-hfw-header-z: 1000;

	/* --- Hilfsnavigation --------------------------------------------------- */
	--ti-md-hfw-rail-offset: 35vh;
	--ti-md-hfw-rail-z: 9000;
	--ti-md-hfw-btn-size: calc(52 * var(--ti-md-hfw-u));
	--ti-md-hfw-btn-gap: calc(8 * var(--ti-md-hfw-u));
	--ti-md-hfw-panel-width: calc(420 * var(--ti-md-hfw-u));
	--ti-md-hfw-mobile-bar-height: calc(64 * var(--ti-md-hfw-u));

	/* --- Icons ------------------------------------------------------------- */
	--ti-md-hfw-icon-size: calc(22 * var(--ti-md-hfw-u));
	--ti-md-hfw-icon-stroke: 1.6;
}

/**
 * Breakpoint-Referenz (muss zu config/header.php passen):
 *   mobile: < 1000px (entspricht respond-to(mobile-and-tablet) im Theme)
 */

/* Basis für alle Inline-Icons. */
.ti-md-hfw-icon {
	display: block;
	width: var(--ti-md-hfw-icon-size);
	height: var(--ti-md-hfw-icon-size);
	flex: 0 0 auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: var(--ti-md-hfw-icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ti-md-hfw-duration-fast: 1ms;
		--ti-md-hfw-duration-base: 1ms;
		--ti-md-hfw-duration-slow: 1ms;
	}
}