/**
 * Atlas Labs — Status Components (Alerts & Badges)
 *
 * Alerts and badges are combined in one file because both are direct
 * implementations of the single status-color tint pattern in
 * DESIGN_SYSTEM.md#section-2-color-tokens (tinted background,
 * full-opacity text/icon, mid-opacity border) — not two unrelated
 * concerns sharing a file for convenience.
 *
 * Known gap: the Information alert is specified in
 * UI_COMPONENT_SPECIFICATIONS.md#alerts as using "color-accent-primary
 * at the same tint pattern" as badges, but DESIGN_SYSTEM.md defines no
 * `--color-badge-accent-*` tokens to match. The values below compute
 * the documented tint formula (14%/32% opacity) against
 * `--color-accent-primary`'s own RGB (0, 0, 0 — true black in the
 * light palette) by hand, since a CSS custom property can't be
 * wrapped in rgba() with a different alpha. Flagged for
 * DESIGN_SYSTEM.md to gain explicit accent-tint tokens in a future
 * documentation pass.
 *
 * Toast Notifications are not implemented here: DESIGN_SYSTEM.md/
 * UI_COMPONENT_SPECIFICATIONS.md describe positioning, auto-dismiss
 * timing, and a one-at-a-time queue — all JS-driven behavior, not a
 * visual variant. That belongs to the sprint that builds interactive
 * components; the `.al-alert` styling here is what a toast will visually
 * reuse once that behavior exists.
 */

/* ---------------------------------------------------------------
 * Alerts
 * ------------------------------------------------------------- */

.al-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-16);
	border-radius: var(--radius-md);
	border: var(--border-width-standard) solid;
	font-family: var(--font-family-base);
	font-size: var(--type-body-small-size);
	line-height: var(--type-body-small-line-height);
	color: var(--color-text-primary);
}

.al-alert--success {
	background-color: var(--color-badge-success-background);
	border-color: var(--color-badge-success-border);
}

.al-alert--warning {
	background-color: var(--color-badge-warning-background);
	border-color: var(--color-badge-warning-border);
}

.al-alert--error {
	background-color: var(--color-badge-error-background);
	border-color: var(--color-badge-error-border);
}

/* Computed accent tint — see the file-level gap note above. The RGB
   below is --color-accent-primary's own (207, 207, 216 — silver in
   the dark palette), written out by hand. Opacities are 10%/32%
   rather than the badge formula's 14% because a light tint over
   near-black brightens faster than a dark tint over white. */
.al-alert--information {
	background-color: rgba(207, 207, 216, 0.10);
	border-color: rgba(207, 207, 216, 0.32);
}

/* ---------------------------------------------------------------
 * Badges
 * The platform's complete, standardized set — no other badge is
 * added without first updating DESIGN_SYSTEM.md#section-17-badge-tokens
 * and UI_COMPONENT_SPECIFICATIONS.md#badges.
 * ------------------------------------------------------------- */

.al-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding-inline: var(--space-8);
	border-radius: var(--radius-sm);
	border: var(--border-width-standard) solid;
	font-family: var(--font-family-base);
	font-size: var(--type-label-size);
	font-weight: var(--type-label-weight);
	letter-spacing: var(--type-label-letter-spacing);
	text-transform: var(--type-label-transform);
	line-height: 1;
	white-space: nowrap;
}

.al-badge--coa-available,
.al-badge--third-party-tested,
.al-badge--purity {
	background-color: var(--color-badge-success-background);
	color: var(--color-badge-success-text);
	border-color: var(--color-badge-success-border);
}

/* Purity carries a small shield icon (per DESIGN_SYSTEM.md#section-17-badge-tokens)
   — the one badge that pairs an icon with its label, since it's the
   platform's core trust claim. Icon inherits the badge's own text color
   per the icon-follows-text-token rule in UI_COMPONENT_SPECIFICATIONS.md#icons. */
.al-badge--purity {
	gap: var(--space-4);
	font-weight: var(--weight-semibold);
}

.al-badge--purity svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.al-badge--research-use-only,
.al-badge--us-fulfilled {
	background-color: var(--color-badge-neutral-background);
	color: var(--color-badge-neutral-text);
	border-color: var(--color-badge-neutral-border);
}

.al-badge--new {
	background-color: var(--color-badge-neutral-background);
	color: var(--color-accent-primary);
	border-color: var(--color-border-secondary);
}

.al-badge--coming-soon {
	background-color: var(--color-badge-warning-background);
	color: var(--color-badge-warning-text);
	border-color: var(--color-badge-warning-border);
}

.al-badge--out-of-stock {
	background-color: var(--color-badge-neutral-background);
	color: var(--color-text-muted);
	border-color: var(--color-border-primary);
}

.al-badge--best-seller {
	background-color: var(--color-text-primary);
	color: var(--color-bg-primary);
	border-color: transparent;
}