/**
 * components.css
 * ---------------------------------------------------------------------------
 * Reusable, presentation-only components: buttons, cards, badges, chips,
 * pills, accordions, tabs. Every component reads from tokens.css so a global
 * change (radius, color, shadow) happens in one place.
 */

/* ---- Buttons -------------------------------------------------------------- */
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
	padding: 0.8rem 1.5rem;
	border-radius: var(--bb-radius-pill);
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition), transform var(--bb-transition);
	min-height: 44px; /* touch target */
}
.bb-btn:hover { text-decoration: none; }
.bb-btn:active { transform: translateY(1px); }

.bb-btn--primary { background: var(--bb-ink); color: var(--bb-text-inverse); border-color: var(--bb-ink); }
.bb-btn--primary:hover { background: var(--bb-stage-collect); border-color: var(--bb-stage-collect); color: #fff; }

.bb-btn--accent { background: var(--bb-accent); color: var(--bb-ink); border-color: var(--bb-accent); }
.bb-btn--accent:hover { background: var(--bb-ink); color: var(--bb-accent); border-color: var(--bb-ink); }

.bb-btn--outline { background: transparent; color: var(--bb-ink); border-color: var(--bb-ink); }
.bb-btn--outline:hover { background: var(--bb-ink); color: var(--bb-text-inverse); }

.bb-btn--ghost { background: transparent; color: var(--bb-ink); border-color: transparent; padding-inline: 0.75rem; }
.bb-btn--ghost:hover { color: var(--bb-stage-collect); }

.bb-on-dark .bb-btn--outline { color: var(--bb-text-inverse); border-color: rgba(255,255,255,0.5); }
.bb-on-dark .bb-btn--outline:hover { background: var(--bb-text-inverse); color: var(--bb-ink); border-color: #fff; }

.bb-btn--lg { padding: 1rem 1.9rem; font-size: var(--wp--preset--font-size--medium); }
.bb-btn--block { width: 100%; }

/* ---- Cards ---------------------------------------------------------------- */
.bb-card {
	background: var(--bb-surface);
	border: var(--bb-border);
	border-radius: var(--bb-radius-lg);
	padding: var(--wp--preset--spacing--50);
	transition: border-color var(--bb-transition), box-shadow var(--bb-transition), transform var(--bb-transition);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
}
.bb-card--link:hover { border-color: var(--bb-ink); box-shadow: var(--bb-shadow-md); transform: translateY(-2px); }
.bb-card--flat { box-shadow: none; }
.bb-card--fill { background: var(--bb-surface-alt); border-color: transparent; }
.bb-card__title { font-size: var(--wp--preset--font-size--large); font-weight: 700; letter-spacing: -0.01em; }
.bb-card__meta { font-size: var(--wp--preset--font-size--small); color: var(--bb-text-subtle); }
.bb-card__cta {
	margin-top: auto;
	font-weight: 600;
	color: var(--bb-stage-collect);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.bb-card--link:hover .bb-card__cta::after { transform: translateX(3px); }
.bb-card__cta::after { content: "\2192"; transition: transform var(--bb-transition); }

/* Icon token on cards */
.bb-card__icon {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: var(--bb-radius-md);
	background: var(--bb-accent-soft);
	color: var(--bb-ink);
	flex: none;
}

/* ---- Badges & status ------------------------------------------------------ */
.bb-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.65rem;
	border-radius: var(--bb-radius-pill);
	border: 1px solid var(--bb-line);
	background: var(--bb-surface);
	color: var(--bb-text-muted);
	line-height: 1.4;
}
/* status dot is paired with a text label so status is never color-only */
.bb-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.bb-badge--new { color: var(--bb-status-new); border-color: color-mix(in srgb, var(--bb-status-new) 40%, transparent); }
.bb-badge--updated { color: var(--bb-status-updated); border-color: color-mix(in srgb, var(--bb-status-updated) 40%, transparent); }
.bb-badge--soon { color: var(--bb-status-soon); border-color: color-mix(in srgb, var(--bb-status-soon) 40%, transparent); }
.bb-badge--live { color: var(--bb-status-live); border-color: color-mix(in srgb, var(--bb-status-live) 40%, transparent); }

/* ---- Chips / filter buttons ---------------------------------------------- */
.bb-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: var(--bb-radius-pill);
	border: 1.5px solid var(--bb-line);
	background: var(--bb-surface);
	color: var(--bb-text-muted);
	cursor: pointer;
	min-height: 40px;
	transition: all var(--bb-transition);
}
.bb-chip:hover { border-color: var(--bb-ink); color: var(--bb-ink); }
.bb-chip[aria-pressed="true"],
.bb-chip.is-active { background: var(--bb-ink); color: var(--bb-text-inverse); border-color: var(--bb-ink); }

/* ---- Toggle (segmented control) ------------------------------------------ */
.bb-toggle {
	display: inline-flex;
	padding: 4px;
	border-radius: var(--bb-radius-pill);
	background: var(--bb-surface-alt);
	border: 1px solid var(--bb-line);
	gap: 4px;
}
.bb-toggle__btn {
	border: none;
	background: transparent;
	padding: 0.55rem 1.25rem;
	border-radius: var(--bb-radius-pill);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bb-text-muted);
	cursor: pointer;
	min-height: 40px;
	transition: all var(--bb-transition);
}
.bb-toggle__btn[aria-selected="true"] { background: var(--bb-surface); color: var(--bb-ink); box-shadow: var(--bb-shadow-sm); }

/* ---- Accordion (FAQ) ------------------------------------------------------ */
.bb-accordion { border-top: var(--bb-border); }
.bb-accordion__item { border-bottom: var(--bb-border); }
.bb-accordion__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: var(--wp--preset--spacing--40) 0;
	background: none;
	border: none;
	text-align: left;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--bb-ink);
	cursor: pointer;
}
.bb-accordion__icon { flex: none; transition: transform var(--bb-transition); }
.bb-accordion__trigger[aria-expanded="true"] .bb-accordion__icon { transform: rotate(45deg); }
.bb-accordion__panel { padding-bottom: var(--wp--preset--spacing--40); color: var(--bb-text-muted); max-width: 68ch; }
.bb-accordion__panel[hidden] { display: none; }

/* ---- Notice / callout ----------------------------------------------------- */
.bb-note {
	border-left: 3px solid var(--bb-accent);
	background: var(--bb-surface-alt);
	padding: var(--wp--preset--spacing--40);
	border-radius: 0 var(--bb-radius-md) var(--bb-radius-md) 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bb-text-muted);
}

/* ---- Empty state ---------------------------------------------------------- */
.bb-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
	border: 1.5px dashed var(--bb-line);
	border-radius: var(--bb-radius-lg);
	color: var(--bb-text-muted);
}
.bb-empty__title { font-weight: 700; color: var(--bb-ink); margin-bottom: 0.5rem; }

/* ---- Section on dark ------------------------------------------------------ */
.bb-on-dark {
	background: var(--bb-surface-inverse);
	color: var(--bb-text-inverse);
}
.bb-on-dark .bb-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
.bb-on-dark .bb-eyebrow { color: var(--bb-accent); }
.bb-on-dark .bb-card__title,
.bb-on-dark h1, .bb-on-dark h2, .bb-on-dark h3, .bb-on-dark h4 { color: var(--bb-text-inverse); }
.bb-on-dark .bb-text-muted,
.bb-on-dark .bb-card__meta { color: var(--wp--preset--color--grey-mid); }