/**
 * Button Block — Styles
 *
 * PHASE 4 — BLOCK SYSTEM (ATOMS ONLY). TOKEN-ONLY STYLING.
 *
 * Every value below is a var(--atb-*, fallback) read from
 * tokens/tokens.css. No raw color hex codes, no raw px/rem literals
 * for anything that has a token equivalent. The fallback value in
 * each var() is provided ONLY so the block still renders sanely if
 * tokens.css somehow isn't loaded — it is not a substitute for using
 * the token, it's a safety net.
 *
 * ISOLATION RULE: every selector here is rooted at .atb-button. There
 * is NO [data-atb-section="..."] selector anywhere in this file —
 * that would make this "atom" secretly depend on which section it's
 * placed in, which breaks the "blocks must not know where they are
 * used" rule. This file knows nothing about hero, services, or any
 * other section.
 */

.atb-button {
	display: inline-block;
	font-family: var(--atb-font-family-base, sans-serif);
	font-weight: var(--atb-font-weight-medium, 500);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--atb-radius-md, 6px);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Variants */

.atb-button--primary {
	background-color: var(--atb-color-primary, #2563eb);
	color: var(--atb-color-background, #ffffff);
	border-color: var(--atb-color-primary, #2563eb);
}

.atb-button--primary:hover {
	background-color: var(--atb-color-primary-dark, #1d4ed8);
	border-color: var(--atb-color-primary-dark, #1d4ed8);
}

.atb-button--secondary {
	background-color: var(--atb-color-secondary, #7c3aed);
	color: var(--atb-color-background, #ffffff);
	border-color: var(--atb-color-secondary, #7c3aed);
}

.atb-button--secondary:hover {
	background-color: var(--atb-color-secondary-dark, #6d28d9);
	border-color: var(--atb-color-secondary-dark, #6d28d9);
}

.atb-button--ghost {
	background-color: transparent;
	color: var(--atb-color-primary, #2563eb);
	border-color: var(--atb-color-border, #e5e5e5);
}

.atb-button--ghost:hover {
	background-color: var(--atb-color-surface, #f5f5f5);
}

/* Sizes */

.atb-button--sm {
	font-size: var(--atb-font-size-sm, 0.875rem);
	padding: var(--atb-space-2, 0.5rem) var(--atb-space-4, 1rem);
}

.atb-button--md {
	font-size: var(--atb-font-size-base, 1rem);
	padding: var(--atb-space-3, 0.75rem) var(--atb-space-6, 1.5rem);
}

.atb-button--lg {
	font-size: var(--atb-font-size-lg, 1.125rem);
	padding: var(--atb-space-4, 1rem) var(--atb-space-8, 2rem);
}