/* ==========================================================================
   Component: Card (+ glass surface)
   Figma: "Mada BNPL" → Cards (node 226:91) — Reusable Card, FAQ/Question Card,
          Filter components. Bento variants seen on Home (navy / teal /
          ice-blue / patterned) + glass app-card in hero.
   Tokens: radius-2xl/3xl, --space-* padding, semantic colours, glass-*.
   ========================================================================== */

.mada-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-7);
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-150);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-base);
}

.mada-card--lg     { padding: var(--space-9); border-radius: var(--radius-3xl); }
.mada-card--navy   { background-color: var(--color-cta);       color: var(--color-text-on-dark); border-color: transparent; }
.mada-card--black  { background-color: var(--color-surface-dark); color: var(--color-text-on-dark); border-color: transparent; }
.mada-card--mint   { background-color: var(--color-mint-50);   color: var(--color-text-on-dark); border-color: transparent; }
.mada-card--ice    { background-color: var(--color-ice-credit); color: var(--color-text); border-color: transparent; }

/* Glass surface (hero app-card / overlays) */
.mada-glass {
	background-color: var(--glass-surface-dark);
	border: var(--border-width-thin) solid var(--glass-border-brand);
	border-radius: var(--radius-2xl);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	color: var(--color-text-on-dark);
	padding: var(--space-7);
}
.mada-glass--mint { background-color: var(--glass-surface-mint); }

/* Status chip / badge (uses feedback colours) */
.mada-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-2);
	padding-inline: var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-xs);
	background-color: var(--color-neutral-100);
	color: var(--color-text);
}
.mada-chip--success { background-color: var(--color-success); color: var(--color-white); }
.mada-chip--warning { background-color: var(--color-warning); color: var(--color-white); }
.mada-chip--error   { background-color: var(--color-error);   color: var(--color-white); }
.mada-chip--mint    { background-color: var(--color-mint-15);  color: var(--color-mint-80); }