/* MG ImmoConnect – Theme-Token-Schicht
 * --------------------------------------------------------------------------
 * Alle sichtbaren Styles konsumieren AUSSCHLIESSLICH die --mgic-* Variablen.
 * Diese Datei definiert die STANDALONE-DEFAULTS (feste Werte) – das Plugin
 * sieht damit OHNE jeden Builder/ohne ACSS gut aus (Elementor, Oxygen, kein
 * Builder, …). Maximale Kompatibilität.
 *
 * Übersteuert wird in dieser Reihenfolge (per Inline-CSS, siehe MGIC_Assets):
 *   1) Farbschema-Template (Erweiterungen → Design-Basis)   -> Farb-Tokens
 *   2) ACSS-Bridge (Erweiterungen → ACSS aktiviert)         -> Tokens = var(--acss, fallback)
 *   3) Design pro Listen-Template / eigene Akzentfarbe
 *
 * Manuell pro Seite überschreiben geht weiterhin via Custom-CSS:
 *   .mgic { --mgic-primary: #0066ff; --mgic-radius: 4px; }
 * -------------------------------------------------------------------------- */

.mgic {
	/* Farben – feste Defaults (Gold/MG). Werden vom gewählten Farbschema übersteuert. */
	--mgic-primary:            #d6982e;
	--mgic-primary-hover:      #b87d1f;
	--mgic-primary-contrast:   #ffffff;
	--mgic-primary-light:      #f7ecd6;

	--mgic-heading:            #323a4d;
	--mgic-text:               #3a4151;
	--mgic-text-muted:         #5b6573;

	--mgic-surface:            #ffffff;
	--mgic-surface-alt:        #f4f5f7;
	--mgic-border:             #e3e6ea;

	--mgic-success:            #1f7a3d;
	--mgic-danger:             #d6982e;

	/* Radius ---------------------------------------------------------------- */
	--mgic-radius:             14px;
	--mgic-radius-s:           .5rem;
	--mgic-radius-pill:        999px;

	/* Spacing --------------------------------------------------------------- */
	--mgic-gap:                24px;
	--mgic-pad:                20px;
	--mgic-pad-s:              12px;

	/* Typografie ------------------------------------------------------------ */
	--mgic-heading-font:       inherit;
	--mgic-body-font:          inherit;
	/* Typo-Hierarchie – nutzt ACSS-Skala (--h1/--h2/--h3/--text-m/--text-s) mit fluidem Fallback.
	   h1 = Objekt-/Preis-Titel · h2 = Sektion · h3 = Unterabschnitt/Karten-Titel · text-m = Fließtext/Werte
	   · text-s = Labels/Captions/Meta. */
	--mgic-h1:                 var(--h1, clamp(1.55rem, 5.5vw, 2.2rem));
	--mgic-h2:                 var(--h2, clamp(1.3rem, 4vw, 1.8rem));
	--mgic-h3:                 var(--h3, clamp(1.15rem, 3vw, 1.35rem));
	--mgic-title-size:         var(--h4, clamp(1.05rem, 2.4vw, 1.25rem));  /* Card-Titel (ACSS --h4) */
	--mgic-price-size:         var(--text-l, clamp(1.15rem, 3.2vw, 1.4rem));  /* Card-Preis (ACSS --text-l) */
	--mgic-label-size:         var(--text-m, 1rem);    /* Fließtext/Werte – ACSS --text-m, sonst 1rem */
	--mgic-fact-size:          var(--text-s, .85rem);  /* Labels/Captions/Meta – ACSS --text-s, sonst .85rem */

	/* Schatten -------------------------------------------------------------- */
	--mgic-shadow:             0 4px 18px rgba(0,0,0,.08);
	--mgic-shadow-hover:       0 10px 30px rgba(0,0,0,.12);

	/* Buttons (von den Tokens abgeleitet) ----------------------------------- */
	--mgic-btn-bg:             var(--mgic-primary);
	--mgic-btn-color:          var(--mgic-primary-contrast);
	--mgic-btn-radius:         var(--mgic-radius-s);
	--mgic-btn-padding:        .8em 1.4em;
}

/* Buttons – ein wiederverwendbares Component, voll über Tokens steuerbar.    */
.mgic .mgic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--mgic-body-font);
	font-weight: 600;
	line-height: 1;
	padding: var(--mgic-btn-padding);
	border: 1px solid transparent;
	border-radius: var(--mgic-btn-radius);
	background: var(--mgic-btn-bg);
	color: var(--mgic-btn-color);
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* WICHTIG: Textfarbe im Hover erneut setzen – sonst überschreibt ein globales a:hover (Theme/ACSS) die
   Button-Schrift und der Text „verschwindet". Fallback für --mgic-primary-hover, falls eine Palette es
   nicht definiert. */
.mgic .mgic-btn:hover,
.mgic .mgic-btn:focus-visible {
	background: var(--mgic-primary-hover, var(--mgic-primary));
	color: var(--mgic-btn-color);
	transform: translateY(-1px);
	box-shadow: var(--mgic-shadow-hover);
}
.mgic .mgic-btn--ghost {
	background: transparent;
	color: var(--mgic-primary);
	border-color: var(--mgic-border);
}
.mgic .mgic-btn--ghost:hover, .mgic .mgic-btn--ghost:focus-visible { background: var(--mgic-surface-alt); color: var(--mgic-primary); }
.mgic .mgic-btn--block { width: 100%; }