/**
 * MCO Design Tokens – EIN zentraler Satz an CSS-Variablen für die gesamte
 * Plattform. Ersetzt die zehn+ unabhängigen Inline-<style>-Blöcke des alten
 * Systems (mco-portal-css, mco3-style, mco-watch-css, mc-dashboard-golive-*,
 * mcpe-front, mco-products-provider-bridge ...), die jeweils eigene,
 * leicht unterschiedliche Farb-/Radius-/Abstandswerte definierten.
 *
 * mco-products, mco-travel und mco-dashboard nutzen bereits dieselben
 * Variablennamen (--mco-accent, --mco-text, --mco-muted, --mco-border,
 * --mco-radius) mit sinnvollen Default-Werten, damit sie auch OHNE dieses
 * Plugin für sich funktionieren. Dieses Stylesheet überschreibt die Defaults
 * zentral, sobald mco-frontend aktiv ist – Änderungen am Erscheinungsbild
 * (z. B. neue Markenfarbe) erfolgen dadurch an EINER Stelle statt in jedem
 * Plugin einzeln.
 */

:root {
	/* Basisfarben */
	--mco-accent: #3b5bfd;
	--mco-accent-dark: #0b1220;
	--mco-text: #0f172a;
	--mco-muted: #64748b;
	--mco-border: #e5e9f2;
	--mco-bg: #f6f7fb;
	--mco-surface: #ffffff;

	/* Statusfarben (Bonus/Erfolg/Warnung/Fehler) */
	--mco-success: #0d9457;
	--mco-success-bg: #e7fbf1;
	--mco-warning: #b45309;
	--mco-warning-bg: #fff7d6;
	--mco-danger: #b91c1c;
	--mco-danger-bg: #fff2f2;

	/* Form/Layout */
	--mco-radius: 16px;
	--mco-radius-lg: 24px;
	--mco-radius-pill: 999px;
	--mco-shadow: 0 12px 30px rgba(15, 23, 42, .08);
	--mco-shadow-strong: 0 20px 45px rgba(15, 23, 42, .14);

	/* Typografie */
	--mco-font: inherit; /* übernimmt bewusst die Theme-Schrift statt eigener Google-Font-Importe */
}

/* Gemeinsame, plugin-übergreifende Hilfsklassen */

.mco-badge-cheapest {
	background: var(--mco-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	border-radius: var(--mco-radius-pill);
	padding: 6px 10px;
}

.mco-badge-bonus {
	color: var(--mco-success);
	background: var(--mco-success-bg);
	font-size: 12px;
	font-weight: 800;
	border-radius: 8px;
	padding: 4px 8px;
	display: inline-block;
}

.mco-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 16px;
}

.mco-section-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: 16px;
	color: var(--mco-text);
}