/*
	Cleansable account site — shared design system.
	Loaded globally after theme.css, so equal-specificity rules here win.
	Tokens mirror the marketing site redesign (C:\xampp\htdocs, launch branch).
*/

:root {
	--c-ink: #230051;
	--c-action: #50248f;
	--c-action-hover: #391a66;
	--c-teal: #00848e;
	--c-teal-deep: #00666e;
	--c-mint: #d5f3f3;
	--c-body: #333333;
	--c-soft: #555555;
	--c-muted: #7b6696;
	--c-faint: #b9b3c4;
	--c-band: #fafafa;
	--c-band-alt: #f4f6f8;
	--c-card-border: rgba(200, 200, 200, 0.5);
	--c-hairline: #f0f0f2;
	--c-link: #5d68bf;
	--c-link-hover: #252b5e;
	--c-warn-bg: #ffe8cc;
	--c-warn-ink: #8a4300;
	--c-ok-bg: #d9f2e3;
	--c-ok-ink: #0b6b3a;
	--r-card: 7px;
	--r-frame: 10px;
	--r-band: 15px;
	--r-chip: 20px;
	--r-btn: 30px;
	--shadow-card: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
	--shadow-card-hover: 0 14px 34px 0 rgba(0, 0, 0, 0.14);
	--shadow-hero: 0 30px 60px 0 rgba(35, 0, 81, 0.16);
	--focus-ring: 0 0 0 3px rgba(80, 36, 143, 0.15);
	--lift: 150ms ease;
}



/* Focus — restores keyboard focus visibility over cleansable.css's *:focus reset */

:focus-visible {
	outline: 2px solid var(--c-action);
	outline-offset: 3px;
}

.input-wrapper.in-focus {
	border-color: var(--c-action);
	box-shadow: var(--focus-ring);
}



/* Kicker — small uppercase section eyebrow */

.acct-kicker {
	color: var(--c-teal);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.acct-kicker--on-mint {
	color: var(--c-teal-deep);
}



/* Chips — pill badges */

.acct-chip {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	border-radius: var(--r-chip);
	padding: 5px 14px;
}

.acct-chip--beta {
	color: var(--c-teal);
	background-color: var(--c-mint);
}

.acct-chip--soon {
	color: var(--c-muted);
	background-color: var(--c-band-alt);
}



/* Icon bubble — circular mint/teal icon holder */

.acct-icon-bubble {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-mint);
	color: var(--c-teal);
	border-radius: 50%;
	font-size: 18px;
}



/* Card — the shared surface recipe */

.acct-card {
	background-color: #ffffff;
	border: 1px solid var(--c-card-border);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	padding: 30px;
}



/* Alerts — status messaging */

.acct-alert {
	border-radius: var(--r-card);
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: left;
}

.acct-alert--warn {
	background-color: var(--c-warn-bg);
	color: var(--c-warn-ink);
}

.acct-alert--ok {
	background-color: var(--c-ok-bg);
	color: var(--c-ok-ink);
}

.acct-alert-title {
	font-weight: 600;
	margin: 0;
}

.acct-alert ul {
	list-style: disc;
	margin: 6px 0 0 18px;
	padding: 0;
}

.acct-alert ul li {
	margin: 3px 0;
}



/* Hint — small muted helper text */

.acct-hint {
	font-size: 13px;
	color: var(--c-muted);
	line-height: 1.5;
}