/*!
 * Facility Management – Design-System: Token-Schicht
 *
 * Einzige Quelle für Farbe, Typografie, Abstände, Radien, Elevation, Fokus und
 * Motion. Vollständig auf #fm-app gescopt (WordPress-Theme bleibt unberührt),
 * kein Build-Schritt, keine CDN-Abhängigkeit (CLAUDE.md §3, §7).
 *
 * Ladeposition: NACH public/vendor/tailadmin/tailadmin.css, VOR fm-app.css.
 * Grund: tailadmin.css definiert die --fm-*-Startwerte; diese Datei überschreibt
 * sie. Alle Modul-Stylesheets lesen die Werte über var(--fm-*) und erben die
 * Marke damit automatisch – unabhängig von ihrer eigenen Ladereihenfolge.
 *
 * Farbquelle: public/img/brand/jp-fm-logo.svg + docs/JP_FM_Designanleitung.md.
 */

/* ---------- Markenschrift (optional, lokal) ----------
 * Sora (Headlines) + Inter (UI) gemäß Markenleitfaden. Die WOFF2-Dateien liegen
 * unter public/vendor/fonts/. Fehlen sie, greift ohne Fehlerbild der
 * System-Stack aus --fm-font (font-display: swap, local() zuerst).
 */
@font-face {
	font-family: "Sora";
	src: local("Sora SemiBold"), local("Sora-SemiBold"),
		url("../vendor/fonts/sora-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sora";
	src: local("Sora Bold"), local("Sora-Bold"),
		url("../vendor/fonts/sora-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: local("Inter Regular"), local("Inter-Regular"),
		url("../vendor/fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: local("Inter Medium"), local("Inter-Medium"),
		url("../vendor/fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: local("Inter SemiBold"), local("Inter-SemiBold"),
		url("../vendor/fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: local("Inter Bold"), local("Inter-Bold"),
		url("../vendor/fonts/inter-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

#fm-app {
	/* ================================================================
	   1. Marke / Primär – Logo-Blau
	   Regel: ausschließlich Aktion, Navigation, Fokus. Nie dekorativ,
	   nie als Statusfläche.
	   ================================================================ */
	--fm-primary-50: #e8f1ff;
	--fm-primary-100: #dbeafe;
	--fm-primary-300: #93b4f6;
	--fm-primary-500: #3b82f6;
	--fm-primary-600: #2563eb;
	--fm-primary-700: #1d4ed8;
	--fm-primary-900: #1e40af;

	/* Kompatibilitäts-Aliase: bestehende Modul-Stylesheets nutzen diese Namen. */
	--fm-primary: var(--fm-primary-600);
	--fm-primary-hover: var(--fm-primary-700);
	--fm-primary-soft: var(--fm-primary-50);
	--fm-primary-contrast: #ffffff;

	/* ================================================================
	   2. Anker / Navy – Sidebar, Überschriften
	   ================================================================ */
	--fm-navy-900: #0d1b2a;
	--fm-navy-800: #16283c;
	--fm-navy-700: #22344a;
	--fm-navy-600: #2c405a;

	--fm-dark: var(--fm-navy-900);
	--fm-dark-2: var(--fm-navy-800);
	--fm-sidebar-text: #b9c4d4;
	--fm-sidebar-heading: #dee4ee;
	--fm-sidebar-muted: #8fa3bc;
	--fm-sidebar-line: var(--fm-navy-700);

	/* ================================================================
	   3. Neutral – Slate-Achse
	   ================================================================ */
	--fm-n-0: #ffffff;
	--fm-n-50: #f8fafc;
	--fm-n-100: #f3f6fa;
	--fm-n-150: #eef2f6;
	--fm-n-200: #e2e8f0;
	--fm-n-300: #cbd5e1;
	--fm-n-400: #94a3b8;
	--fm-n-500: #64748b;
	--fm-n-700: #334155;
	--fm-n-900: #0d1b2a;

	--fm-white: var(--fm-n-0);
	--fm-bg: var(--fm-n-100);
	--fm-surface: var(--fm-n-0);
	--fm-surface-2: var(--fm-n-50);
	--fm-stroke: var(--fm-n-200);
	--fm-stroke-soft: var(--fm-n-150);
	--fm-border: var(--fm-n-200); /* Alias: einige Modul-Layer nutzen --fm-border */
	--fm-heading: var(--fm-n-900);
	--fm-body: var(--fm-n-500);
	--fm-text: var(--fm-n-700);
	--fm-muted: var(--fm-n-400);
	--fm-muted-soft: var(--fm-n-150);

	/* Kompatibilitäts-Aliase: diese Namen werden von fm-app.css und mehreren
	   Modul-Layern über var() gelesen, waren aber nie definiert – dort griffen
	   bisher hart kodierte Fallbacks, u. a. das alte Indigo (#3730a3, #eef2ff,
	   #c7d2fe im PWA-Layer). Mit diesen Zeilen erben alle Module die Marke.
	   Belegstellen: fm-app.css, fm-pwa.css, fm-mail-center.css,
	   fm-lexoffice-migration.css, fm-dispatch-*.css, fm-portal-mobile.css,
	   fm-calendar.css, fm-autocomplete-select.css. */
	--fm-muted-fg: var(--fm-n-500);
	--fm-muted-bg: var(--fm-n-50);
	--fm-link: var(--fm-primary-600);
	--fm-link-hover: var(--fm-primary-700);
	--fm-accent: var(--fm-primary-600);
	--fm-accent-soft: var(--fm-primary-50);
	--fm-accent-border: var(--fm-primary-300);
	--fm-accent-strong: var(--fm-primary-700);
	--fm-gray-50: var(--fm-n-50);
	--fm-gray-100: var(--fm-n-100);
	--fm-gray-200: var(--fm-n-200);

	/* ================================================================
	   4. Semantik
	   Regel: immer weiche Fläche + dunkler Text (nie 600er-Fläche mit
	   Weiß). Ausnahme: Primärbutton. Status nie nur über Farbe.
	   ================================================================ */
	--fm-success: #22c55e;
	--fm-success-soft: #dcfce7;
	--fm-success-line: #bbf7d0;
	--fm-success-text: #15803d;

	--fm-warning: #d97706;
	--fm-warning-soft: #fef3c7;
	--fm-warning-line: #fde68a;
	--fm-warning-text: #92400e;

	--fm-danger: #dc2626;
	--fm-danger-soft: #fee2e2;
	--fm-danger-line: #fecaca;
	--fm-danger-text: #b91c1c;

	/* Info bleibt blau, aber eine Stufe dunkler als Primär → Info ≠ Aktion. */
	--fm-info: var(--fm-primary-700);
	--fm-info-soft: var(--fm-primary-100);
	--fm-info-line: #bfdbfe;
	--fm-info-text: var(--fm-primary-900);

	--fm-neutral: var(--fm-n-500);
	--fm-neutral-soft: var(--fm-n-150);
	--fm-neutral-text: var(--fm-n-500);

	/* ================================================================
	   5. Typografie
	   ================================================================ */
	--fm-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--fm-font-head: Sora, var(--fm-font);
	--fm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fm-fs-2xs: 0.72rem;
	--fm-fs-xs: 0.8rem;
	--fm-fs-sm: 0.875rem;
	--fm-fs-md: 1rem;
	--fm-fs-lg: 1.125rem;
	--fm-fs-xl: 1.375rem;
	--fm-fs-2xl: 1.75rem;
	--fm-fs-3xl: 2.25rem;

	--fm-lh-tight: 1.25;
	--fm-lh-ui: 1.45;
	--fm-lh-prose: 1.6;

	/* ================================================================
	   6. Abstände – 4-px-Raster
	   ================================================================ */
	--fm-s-1: 0.25rem;
	--fm-s-2: 0.5rem;
	--fm-s-3: 0.75rem;
	--fm-s-4: 1rem;
	--fm-s-5: 1.25rem;
	--fm-s-6: 1.5rem;
	--fm-s-8: 2rem;
	--fm-s-10: 2.5rem;
	--fm-s-12: 3rem;

	/* ================================================================
	   7. Radien
	   ================================================================ */
	--fm-r-sm: 6px;
	--fm-r-md: 8px;
	--fm-r-lg: 12px;
	--fm-r-xl: 16px;
	--fm-r-full: 999px;
	--fm-radius: var(--fm-r-lg); /* Alias für bestehende Regeln */

	/* ================================================================
	   8. Elevation – Ruhe zuerst
	   ================================================================ */
	--fm-e-0: none;
	--fm-e-1: 0 1px 2px rgba(13, 27, 42, 0.06);
	--fm-e-2: 0 4px 12px rgba(13, 27, 42, 0.08);
	--fm-e-3: 0 12px 32px rgba(13, 27, 42, 0.14);
	--fm-shadow: var(--fm-e-1);
	--fm-shadow-lg: var(--fm-e-2); /* war bisher undefiniert */

	/* ================================================================
	   9. Fokus – sichtbar auf allen Flächen
	   ================================================================ */
	--fm-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
	--fm-focus-color: var(--fm-primary-600);
	--fm-focus-color-dark: #ffffff;

	/* ================================================================
	   10. Motion
	   ================================================================ */
	--fm-t-fast: 120ms;
	--fm-t-base: 180ms;
	--fm-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* ================================================================
	   11. Z-Index-Ordnung
	   ================================================================ */
	--fm-z-nav: 40;
	--fm-z-overlay: 30;
	--fm-z-drawer: 60;
	--fm-z-modal: 70;
	--fm-z-toast: 80;

	/* ================================================================
	   12. Dichte – Tabellen/Listen. Umschaltbar über
	   #fm-app[data-fm-density="compact"] (siehe fm-design-system.css).
	   ================================================================ */
	--fm-row-h: 2.75rem;
	--fm-cell-y: 0.7rem;
	--fm-cell-x: 0.9rem;
}

/* Kompakte Dichte für datenintensive Ansichten (Innendienst). */
#fm-app[data-fm-density="compact"] {
	--fm-row-h: 2.25rem;
	--fm-cell-y: 0.45rem;
	--fm-cell-x: 0.75rem;
}

/* Bewegungsreduktion respektieren (Guidelines §Barrierefreiheit). */
@media (prefers-reduced-motion: reduce) {
	#fm-app {
		--fm-t-fast: 0ms;
		--fm-t-base: 0ms;
	}
}