.mgic {

	--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-focus:              #1171c5;
	--mgic-border:             #e3e6ea;

	--mgic-success:            #1f7a3d;

	--mgic-danger:             #b32d2e;

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

	--mgic-gap:                24px;
	--mgic-pad:                20px;
	--mgic-pad-s:              12px;

	--mgic-heading-font:       inherit;
	--mgic-body-font:          inherit;

	--mgic-title-size:         var(--h4, clamp(1.05rem, 2.4vw, 1.25rem));
	--mgic-price-size:         var(--text-l, clamp(1.15rem, 3.2vw, 1.4rem));
	--mgic-label-size:         var(--text-m, 1rem);
	--mgic-fact-size:          var(--text-s, .85rem);

	--mgic-muted-bg:           #eef1f4;
	--mgic-muted-dark:         #e2e5ea;
	--mgic-glass-bg:           rgba(255,255,255,.46);
	--mgic-glass-border:       rgba(255,255,255,.6);

	--mgic-primary-dark:       var(--primary-dark, #b87d1f);

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

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

.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;
}

.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 { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; }