/**
 * Design-system components (§16).
 *
 * Author-pickable block styles that re-use the design tokens. Registered in
 * includes/loader/register-components.php. Like the button styles, each only
 * re-maps tokens, so it inherits the system's color/spacing/radius.
 */

/* ===== NOTICE / ALERT — status-driven message boxes =====
 *
 * Status color comes from the GLOBAL status roles (the same in every scheme,
 * like validation, §8a). The tint is computed from the status color so it adapts
 * to light/dark surfaces.
 *
 * Accessibility: the author should add role="status" (or role="alert" for Error)
 * to the group, and include a text label (e.g. "Error:") so the status isn't
 * conveyed by color alone (§15g / §16).
 */

.wp-block-group[class*='is-style-notice-'] {
	background-color: color-mix(in srgb, var(--notice-color, currentcolor) 8%, transparent);
	border-inline-start: 4px solid var(--notice-color, currentcolor);
	border-radius: var(--input-border-radius, 3px);
	padding: var(--space-small, 0.75rem) var(--space-medium, 1.25rem);
}

.wp-block-group.is-style-notice-info {
	--notice-color: var(--wp--custom--status--information, var(--color-info));
}

.wp-block-group.is-style-notice-success {
	--notice-color: var(--wp--custom--status--success, var(--color-success));
}

.wp-block-group.is-style-notice-warning {
	--notice-color: var(--wp--custom--status--warning, var(--color-warning));
}

.wp-block-group.is-style-notice-error {
	--notice-color: var(--wp--custom--status--error, var(--color-error));
}

/* ===== CARD — surfaced, bordered, elevated container =====
 * Scheme-aware: takes the scheme surface + border; the shadow gives elevation.
 * Border + shadow define it even when its surface matches the page (incl. dark). */
.wp-block-group.is-style-card {
	background-color: var(--ftm-scheme-bg, var(--color-surface));
	border: 1px solid var(--ftm-scheme-border, var(--color-border-soft));
	border-radius: var(--wp--custom--radius--md, 10px);
	box-shadow: var(--wp--preset--shadow--sm, 0 2px 4px rgb(0 0 0 / 8%));
	padding: var(--space-large, 1.5rem);
}

/* ===== BADGE / CHIP — small accent pill =====
 * A soft accent tint, sized to content (inline-block). Scheme-aware. */
p.is-style-badge {
	display: inline-block;
	background-color: color-mix(in srgb, var(--ftm-scheme-accent, var(--color-primary)) 14%, transparent);
	border-radius: 1em;
	color: var(--ftm-scheme-accent, var(--color-primary));
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 600;
	line-height: 1.4;
	padding: 0.15em 0.7em;
}

/* ===== TABLE — scheme-aware borders, header emphasis, stripes (core/table) =====
 * Base styling (not a variant): every table takes the scheme border + a tinted
 * header, so it adapts to light/dark. Core's "Stripes" style gets a scheme zebra. */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :is(th, td) {
	border: 1px solid var(--ftm-scheme-border, var(--color-border-soft));
	padding: var(--space-xsmall, 0.5rem) var(--space-small, 0.75rem);
	text-align: start;
}

.wp-block-table th {
	background-color: color-mix(in srgb, var(--ftm-scheme-text, currentcolor) 6%, transparent);
	font-weight: 600;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) :is(th, td) {
	background-color: color-mix(in srgb, var(--ftm-scheme-text, currentcolor) 4%, transparent);
}

/* ===== QUOTE — accent rule + the 'quote' type style (core/quote) ===== */
.wp-block-quote {
	border-inline-start: 4px solid var(--ftm-scheme-accent, var(--color-primary));
	padding-inline-start: var(--space-medium, 1.25rem);
}

.wp-block-quote > :where(p) {
	font-family: var(--wp--custom--type-styles--quote--font-family);
	font-size: var(--wp--custom--type-styles--quote--font-size);
	font-style: var(--wp--custom--type-styles--quote--font-style, italic);
	line-height: var(--wp--custom--type-styles--quote--line-height);
}

/* ===== DARK-MODE TOGGLE (§18) — footer switch, opt-in ===== */
.ftm-theme-toggle-wrap {
	background-color: var(--color-surface);
	padding: var(--space-small, 0.75rem);
	text-align: center;
}

.ftm-theme-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--color-border-soft);
	border-radius: 1.5em;
	color: var(--color-text);
	cursor: pointer;
	display: inline-flex;
	font: var(--label-medium);
	gap: 0.6em;
	padding: 0.4em 1em 0.4em 0.6em;
}

.ftm-theme-toggle__switch {
	background: var(--color-border-soft);
	block-size: 1.1em;
	border-radius: 1em;
	display: inline-block;
	inline-size: 2em;
	position: relative;
	transition: background-color var(--transition-base, 0.2s);
}

.ftm-theme-toggle__switch::after {
	background: var(--color-surface);
	block-size: 0.8em;
	border-radius: 50%;
	content: '';
	inline-size: 0.8em;
	inset-block-start: 0.15em;
	inset-inline-start: 0.15em;
	position: absolute;
	transition: inset-inline-start var(--transition-base, 0.2s);
}

.ftm-theme-toggle[aria-pressed='true'] .ftm-theme-toggle__switch {
	background: var(--ftm-scheme-accent, var(--color-primary));
}

.ftm-theme-toggle[aria-pressed='true'] .ftm-theme-toggle__switch::after {
	inset-inline-start: 1.05em;
}