/**
 * Armchair Journal — Global Button Styles
 * Centralized reusable buttons matching design tokens and accessibility guidelines
 */

/* ─── 1. Reusable Primary Button (Crimson Filled) ─── */
.aj-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--aj-color-red-primary, #c33d29);
	color: #ffffff;
	font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
	font-size: var(--aj-fs-11-5, 11.5px);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 20px;
	border: 1.5px solid var(--aj-color-red-primary, #c33d29);
	border-radius: var(--aj-radius-4, 4px);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--aj-shadow-btn-red, 0 2px 8px rgba(192, 57, 43, 0.3));
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.aj-btn-primary:hover,
.aj-btn-primary:focus,
.aj-btn-primary:active {
	background-color: var(--aj-color-red-hover, #a83424);
	border-color: var(--aj-color-red-hover, #a83424);
	color: #ffffff;
	box-shadow: var(--aj-shadow-btn-red, 0 2px 8px rgba(192, 57, 43, 0.3));
}

/* ─── 2. Reusable Outline Button (Navy Outline) ─── */
.aj-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--aj-color-navy-primary, #1a3d74);
	background-color: transparent;
	color: var(--aj-color-navy-primary, #1a3d74);
	font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
	font-size: var(--aj-fs-11-5, 11.5px);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: var(--aj-radius-4, 4px);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.aj-btn-outline:hover,
.aj-btn-outline:focus,
.aj-btn-outline:active {
	background-color: var(--aj-color-navy-primary, #1a3d74);
	color: #ffffff;
	box-shadow: none;
}

/* ─── 3. Light Outline Button (For Dark Navy Containers & CTA Bands) ─── */
.aj-btn-outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: transparent;
	color: #f6f7fa;
	font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: var(--aj-radius-4, 4px);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.aj-btn-outline-light:hover,
.aj-btn-outline-light:focus,
.aj-btn-outline-light:active {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.8);
	color: #ffffff;
	box-shadow: none;
}

/* ─── 4. Utility Bar Action Button Base ─── */
.aj-btn-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	border-radius: var(--aj-radius-4, 4px);
	font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
	font-size: var(--aj-fs-11, 11px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color var(--aj-transition-color, 0.3s ease),
	            border-color var(--aj-transition-color, 0.3s ease),
	            color var(--aj-transition-color, 0.3s ease),
	            box-shadow var(--aj-transition-color, 0.3s ease);
}

/* Action Button Variants */
.aj-btn-pair-search {
	gap: 6px;
	padding: 0 12px;
	border: 1.5px solid #c3cad4;
	color: var(--aj-color-ink-body, #474f5c);
	letter-spacing: 0.03em;
}

.aj-btn-pair-search svg {
	flex-shrink: 0;
}

.aj-btn-pair-search:hover {
	border-color: var(--aj-color-navy-primary, #1a3d74);
	color: var(--aj-color-navy-primary, #1a3d74);
}

.aj-btn-profile {
	gap: 7px;
	padding: 0 8px 0 3px;
	border: 1.5px solid var(--aj-color-navy-primary, #1a3d74);
	color: var(--aj-color-navy-primary, #1a3d74);
}

.aj-btn-profile:hover {
	background-color: #eef3fa;
}

.aj-btn-logout {
	padding: 0 14px;
	border: 1.5px solid #c3cad4;
	color: var(--aj-color-ink-secondary, #616a78);
}

.aj-btn-logout:hover {
	border-color: var(--aj-color-red-primary, #c33d29);
	color: var(--aj-color-red-primary, #c33d29);
}

.aj-btn-login {
	padding: 0 14px;
	border: 1.5px solid var(--aj-color-navy-primary, #1a3d74);
	color: var(--aj-color-navy-primary, #1a3d74);
}

.aj-btn-login:hover {
	background-color: var(--aj-color-navy-primary, #1a3d74);
	color: #ffffff;
}

.aj-btn-register {
	padding: 0 14px;
	border: 1.5px solid var(--aj-color-red-primary, #c33d29);
	background-color: var(--aj-color-red-primary, #c33d29);
	color: #ffffff;
	box-shadow: var(--aj-shadow-btn-red, 0 2px 8px rgba(192, 57, 43, 0.3));
}

.aj-btn-register:hover {
	background-color: var(--aj-color-red-hover, #a83424);
	border-color: var(--aj-color-red-hover, #a83424);
}

.aj-btn-donate {
	gap: 5px;
	padding: 0 14px;
	border: 1.5px solid #c3cad4;
	color: var(--aj-color-ink-secondary, #616a78);
}

.aj-btn-donate svg {
	flex-shrink: 0;
}

.aj-btn-donate:hover {
	border-color: var(--aj-color-navy-primary, #1a3d74);
	color: var(--aj-color-navy-primary, #1a3d74);
}

/* ─── 5. Footer Donate Button ─── */
.ft-btn-donate {
	text-decoration: none;
	color: #ffffff;
	font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
	font-weight: 800;
	font-size: var(--aj-fs-13, 13px);
	letter-spacing: 0.03em;
	background-color: var(--aj-color-red-primary, #c33d29);
	padding: 8px 14px;
	border-radius: var(--aj-radius-5, 5px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	transition: background-color var(--aj-transition-color, 0.3s ease);
}

.ft-btn-donate:hover {
	background-color: var(--aj-color-red-hover, #a83424);
	color: #ffffff;
}

/* ─── 6. Focus-Visible & Accessibility States ─── */
.aj-btn-primary:focus-visible,
.aj-btn-outline:focus-visible,
.aj-btn-action:focus-visible,
.ft-btn-donate:focus-visible {
	outline: 2px solid var(--aj-color-navy-primary, #1a3d74);
	outline-offset: 2px;
}

.aj-btn-outline-light:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ─── 7. Disabled States ─── */
.aj-btn-primary:disabled,
.aj-btn-primary.is-disabled,
.aj-btn-outline:disabled,
.aj-btn-outline.is-disabled,
.aj-btn-outline-light:disabled,
.aj-btn-outline-light.is-disabled,
.aj-btn-action:disabled,
.aj-btn-action.is-disabled,
.ft-btn-donate:disabled,
.ft-btn-donate.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}