/**
 * Atlas Labs — Button System
 *
 * Implements DESIGN_SYSTEM.md#section-11-button-tokens and the usage
 * rules in UI_COMPONENT_SPECIFICATIONS.md#buttons. Focus styling is
 * intentionally not repeated here — base.css already applies
 * `--color-focus-ring` to every focusable element globally.
 *
 * Known gaps, resolved and flagged rather than guessed:
 *
 * 1. No documented hover treatment exists for the Danger variant
 *    (the Hover row in Section 11's State Behavior table covers
 *    Primary/Secondary/Outline/Ghost only). Left unstyled on hover
 *    rather than inventing an undocumented color shift.
 * 2. Section 19 specifies the loading spinner as always
 *    `color-accent-primary`, which would be invisible on a Primary
 *    button (background is also accent-primary). The spinner below
 *    uses `currentColor` instead, which is legible in every variant
 *    since it inherits that variant's own (contrast-correct) text
 *    color. Worth reconciling in DESIGN_SYSTEM.md.
 * 3. "Button width locked to its resting width" during Loading
 *    requires measuring the rendered width in JS before the loading
 *    class is applied — that behavior belongs to whichever future
 *    sprint wires a button to a real async action. This file only
 *    provides the visual treatment (label hidden, spinner shown).
 */

.al-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	height: 44px;
	padding-inline: var(--space-24);
	padding-block: var(--space-12);
	border-radius: var(--radius-md);
	border: var(--border-width-standard) solid transparent;
	background-color: transparent;
	font-family: var(--font-family-base);
	font-size: var(--type-button-size);
	font-weight: var(--type-button-weight);
	letter-spacing: var(--type-button-letter-spacing);
	line-height: var(--type-button-line-height);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--duration-standard) var(--easing-standard),
		border-color var(--duration-standard) var(--easing-standard),
		color var(--duration-standard) var(--easing-standard),
		transform var(--duration-fast) var(--easing-standard);
}

/* Press feedback — the single deliberate scale moment
   DESIGN_SYSTEM.md#section-8-transition-system allows ("a button
   press may scale to 0.98 over duration-fast"). No hover scale, no
   hover shadow, per the same section. */
.al-button:active:not(:disabled) {
	transform: scale(0.98);
}

.al-button--compact {
	height: 36px;
	padding-inline: var(--space-16);
	padding-block: var(--space-8);
}

/* ---------------------------------------------------------------
 * Variants
 * ------------------------------------------------------------- */

/* Primary = the silver control: satin metallic gradient over the
   accent fill (the fill is the fallback if gradients are stripped),
   dark label. Hover brightens to the shinier gradient — the
   matte/shiny metallic language from the v1.1 palette. */
.al-button--primary {
	background-color: var(--color-accent-primary);
	background-image: var(--gradient-silver);
	color: var(--color-bg-primary);
}

.al-button--primary:hover:not(:disabled) {
	background-color: var(--color-accent-hover);
	background-image: var(--gradient-silver-hover);
}

.al-button--secondary {
	background-color: transparent;
	color: var(--color-text-primary);
	border-color: var(--color-border-secondary);
}

.al-button--secondary:hover:not(:disabled) {
	background-color: var(--color-surface-hover);
}

.al-button--outline {
	background-color: transparent;
	color: var(--color-text-secondary);
	border-color: var(--color-border-primary);
}

.al-button--outline:hover:not(:disabled) {
	background-color: var(--color-surface-hover);
	border-color: var(--color-border-secondary);
}

/* Active/selected toggle state, per
   UI_COMPONENT_SPECIFICATIONS.md#buttons ("Outline... may use an
   Atlas Teal [accent] border/text when representing an active/
   selected toggle state"). */
.al-button--outline.is-active {
	color: var(--color-accent-primary);
	border-color: var(--color-accent-primary);
}

.al-button--ghost {
	background-color: transparent;
	color: var(--color-text-secondary);
}

.al-button--ghost:hover:not(:disabled) {
	color: var(--color-text-primary);
	text-decoration: underline;
}

/* Dark-palette note: --color-error is a light coral on dark surfaces,
   so the readable label color on a Danger fill is the DARK page color,
   not the light text color (6.2:1 — verified). */
.al-button--danger {
	background-color: var(--color-error);
	color: var(--color-bg-primary);
}

/* Kadence (parent theme) styles the generic `button, .button,
   .wp-block-button__link, .wp-element-button, input[type="button"]...`
   selector group with its own default Global Palette color — the same
   specificity as a single class selector. WooCommerce's own templates
   (e.g. the loop "Read more"/Add to cart link) always include a
   literal `button` class alongside ours, so any element carrying both
   is a specificity tie Kadence's later-loaded CSS wins by default.
   Bumped by one element (html body ...) so Atlas Labs button colors
   win without !important — same pattern as the body/heading fix in
   base.css, applied here because it's the same root cause on a
   different element. */
html body .al-button {
	background-color: transparent;
}

html body .al-button--primary {
	background-color: var(--color-accent-primary);
	background-image: var(--gradient-silver);
	color: var(--color-bg-primary);
}

html body .al-button--primary:hover:not(:disabled) {
	background-color: var(--color-accent-hover);
	background-image: var(--gradient-silver-hover);
}

html body .al-button--secondary,
html body .al-button--outline,
html body .al-button--ghost {
	background-color: transparent;
}

html body .al-button--danger {
	background-color: var(--color-error);
	color: var(--color-bg-primary);
}

html body .al-button:disabled,
html body .al-button--disabled {
	background-color: var(--color-surface-disabled);
	/* Strip the primary variant's silver gradient too — background-color
	   alone doesn't override a background-image. */
	background-image: none;
}

/* ---------------------------------------------------------------
 * Icon & floating buttons
 * 40×40px matches the icon-button size used consistently across
 * DESIGN_SYSTEM.md's Header Tokens (account/cart icons) and Modal
 * Tokens (close button) — not the generic 44px button height.
 * ------------------------------------------------------------- */

.al-button--icon {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--radius-full);
}

.al-button--floating {
	position: fixed;
	right: var(--space-24);
	bottom: var(--space-24);
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	z-index: var(--z-floating);
}

/* ---------------------------------------------------------------
 * Disabled
 * ------------------------------------------------------------- */

.al-button:disabled,
.al-button--disabled {
	background-color: var(--color-surface-disabled);
	background-image: none;
	color: var(--color-text-disabled);
	border-color: var(--color-border-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Loading
 * ------------------------------------------------------------- */

.al-button__label {
	transition: opacity var(--duration-fast) var(--easing-standard);
}

.al-button--loading {
	pointer-events: none;
}

.al-button--loading .al-button__label {
	opacity: 0;
}

.al-button--loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: var(--radius-full);
	animation: al-spin 800ms linear infinite;
}

@keyframes al-spin {
	to {
		transform: rotate(360deg);
	}
}

/* No prefers-reduced-motion override here: base.css already freezes
   all animation globally without exception, per
   DESIGN_SYSTEM.md#section-8-transition-system's Animation
   Philosophy ("degrades to an instant state change when set, without
   exception"). */