/* ==============================================
	 Unified Button / CTA Component
	 - Modern, elevated, accessible
	 - Single base class: .btn
	 - Variants: .btn--primary | .btn--secondary | .btn--outline | .btn--ghost | .btn--danger
	 - Sizes: .btn--xs | .btn--sm | .btn--md | .btn--lg | .btn--xl
	 - Shape modifiers: .btn--pill | .btn--square (icon)
	 - Loading + disabled states
	 - Maps legacy classes: .cta-button, .button-primary, .button-secondary → new variants
	 ============================================== */

:root {
	--btn-font-stack: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--btn-radius-sm: 6px;
	--btn-radius-md: 12px;
	--btn-radius-pill: 999px;
	--btn-shadow-elev: 0 2px 4px rgba(0,0,0,.06), 0 6px 18px -6px rgba(0,0,0,.25);
	--btn-shadow-elev-hover: 0 4px 10px rgba(0,0,0,.08), 0 12px 28px -8px rgba(0,0,0,.30);
	--btn-shadow-inset-focus: 0 0 0 3px var(--color-focus, #77c2ff);
	--btn-transition: .55s cubic-bezier(.16,1,.3,1);
	--btn-primary-bg: linear-gradient(145deg,var(--color-accent,#2d5a27),var(--color-accent-alt,#3a7a35));
	--btn-primary-fg: var(--color-text-inverse,#fff);
	--btn-primary-border: rgba(255,255,255,.15);
	--btn-secondary-bg: var(--color-surface-alt,#f1f7f3);
	--btn-secondary-fg: var(--color-accent,#28542c);
	--btn-secondary-border: var(--color-accent-soft-border,#d4e7d9);
	--btn-outline-fg: var(--color-accent,#2d5a27);
	--btn-danger-bg: linear-gradient(145deg,#c43a3a,#941f1f);
	--btn-danger-fg: #fff;
	--btn-danger-border: #c43a3a;
	--btn-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent,#2d5a27) 55%, transparent);
	--btn-disabled-opacity: .55;
}

@media (prefers-color-scheme: dark) {
	:root {
		--btn-secondary-bg: rgba(255,255,255,.06);
		--btn-secondary-border: rgba(255,255,255,.14);
		--btn-outline-fg: var(--color-accent,#9fe29f);
		--btn-primary-border: rgba(255,255,255,.25);
	}
}

/* Base */
.btn, .cta-button, .button-primary, .button-secondary { /* consolidate legacy */
	--_bg: var(--btn-primary-bg);
	--_fg: var(--btn-primary-fg);
	--_border: var(--btn-primary-border);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font: 600 0.875rem/1.2 var(--btn-font-stack);
	letter-spacing: .3px;
	padding: .75rem 1.35rem .78rem;
	border-radius: var(--btn-radius-md);
	background: var(--_bg);
	color: var(--_fg);
	border: 1px solid var(--_border);
	text-decoration: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
	box-shadow: var(--btn-shadow-elev);
	transition: background var(--btn-transition), color var(--btn-transition), box-shadow var(--btn-transition), transform .5s cubic-bezier(.34,1.56,.64,1), border-color .35s ease;
	will-change: transform;
	isolation: isolate;
}

.btn::after, .cta-button::after, .button-primary::after, .button-secondary::after { /* subtle glossy overlay */
	content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none; opacity:.45; transition:opacity .6s ease;}

.btn:hover, .cta-button:hover, .button-primary:hover, .button-secondary:hover { transform: translateY(-4px); box-shadow: var(--btn-shadow-elev-hover); }
.btn:hover::after { opacity:.65; }

.btn:active, .cta-button:active, .button-primary:active, .button-secondary:active { transform: translateY(-2px); transition-duration:.15s; }

.btn:focus-visible, .cta-button:focus-visible, .button-primary:focus-visible, .button-secondary:focus-visible { outline: none; box-shadow: var(--btn-shadow-elev), var(--btn-focus-ring); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
	.btn, .cta-button, .button-primary, .button-secondary { transition: none; transform:none !important; }
	.btn:hover, .cta-button:hover, .button-primary:hover, .button-secondary:hover { box-shadow: var(--btn-shadow-elev); }
}

/* Variants */

.btn--secondary, .button-secondary { --_bg: var(--btn-secondary-bg); --_fg: var(--btn-secondary-fg); --_border: var(--btn-secondary-border); box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.btn--secondary:hover { background: color-mix(in srgb, var(--btn-secondary-bg), #000 4%); }

.btn--outline { background: transparent; --_bg: transparent; --_fg: var(--btn-outline-fg); --_border: currentColor; box-shadow:none; }
.btn--outline:hover { background: color-mix(in srgb, var(--btn-outline-fg) 6%, transparent); }

.btn--ghost { background: transparent; --_bg: transparent; --_fg: var(--btn-outline-fg); --_border: transparent; box-shadow:none; }
.btn--ghost:hover { background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark){ .btn--ghost:hover { background: rgba(255,255,255,.08);} }

.btn--danger { --_bg: var(--btn-danger-bg); --_fg: var(--btn-danger-fg); --_border: var(--btn-danger-border); }
.btn--danger:hover { filter: brightness(1.05); }

/* Accent gradient (legacy gold→green CTA look) */
.btn--gradient, .btn--gold { /* provide two class names for flexibility */
	--_bg: linear-gradient(135deg, var(--kg-gold, #d4af37) 0%, var(--kg-green, #2d5a27) 100%);
	--_fg: #fff;
	--_border: rgba(255,255,255,.25);
	box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 10px 24px -12px rgba(212,175,55,.55);
}
.btn--gradient:hover, .btn--gold:hover { filter:brightness(1.07); box-shadow:0 10px 30px -6px rgba(0,0,0,.35), 0 16px 38px -10px rgba(212,175,55,.55); }

/* Subtle (previous .btn--subtle) */
.btn--subtle { --_bg: var(--btn-secondary-bg); --_fg: var(--btn-secondary-fg); --_border: var(--btn-secondary-border); box-shadow:none; }
.btn--subtle:hover { background: color-mix(in srgb, var(--btn-secondary-bg), #000 5%); }

/* Sizes */
.btn--xs { padding: .45rem .7rem; font-size: .65rem; border-radius: var(--btn-radius-sm); }
.btn--sm { padding: .55rem .95rem; font-size: .73rem; }
.btn--lg { padding: .95rem 1.6rem 1rem; font-size: .95rem; }
.btn--xl { padding: 1.15rem 2.1rem 1.2rem; font-size: 1.05rem; }

/* Pill & Icon styles */
.btn--pill { border-radius: var(--btn-radius-pill); }
.btn--square { width:2.6rem; height:2.6rem; padding:0; border-radius: var(--btn-radius-md); aspect-ratio:1/1; }
.btn--icon-gap > svg { width:1.1em; height:1.1em; }

/* Legacy mappings */
.cta-button.secondary { /* map to outline style for backwards compatibility */
	background: transparent; --_bg: transparent; --_fg: var(--btn-outline-fg); --_border: var(--btn-outline-fg); box-shadow:none;
}
.cta-button.secondary:hover { background: color-mix(in srgb, var(--btn-outline-fg) 8%, transparent); color: var(--btn-outline-fg); }

/* Disabled & Loading */
.btn[disabled], .btn.is-loading, .btn[aria-busy="true"] { cursor: not-allowed; opacity: var(--btn-disabled-opacity); filter: grayscale(.15); box-shadow:none; transform:none !important; }

.btn.is-loading { position:relative; color:transparent !important; }
.btn.is-loading::before { content:""; position:absolute; inset:0; display:block; border-radius:inherit; background:linear-gradient(110deg,transparent 0%, rgba(255,255,255,.35) 45%, transparent 80%); animation: btnShimmer 1.1s linear infinite; }
@keyframes btnShimmer { to { transform: translateX(100%); } }

/* Icon-only accessible label helper */
.btn .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Group spacing utility */
.btn-group { display:flex; flex-wrap:wrap; gap:.6rem; }
.btn-group .btn { flex:0 0 auto; }

/* Scroll to top / floating action mapping if present */
#scrollToTop.btn { position:fixed; bottom:22px; right:22px; z-index:60; box-shadow:0 10px 28px -8px rgba(0,0,0,.35); opacity:0; transform:translateY(10px); transition:opacity .5s, transform .55s; }
#scrollToTop.btn.visible { opacity:1; transform:translateY(0); }

/* Timestamp & collapse buttons (harmonize subtle style) */
.ts-btn, .collapse-btn { font:600 11px/1.1 var(--btn-font-stack); letter-spacing:.5px; background:var(--btn-secondary-bg); color:var(--btn-secondary-fg); border:1px solid var(--btn-secondary-border); border-radius:6px; padding:4px 8px; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.ts-btn:hover, .collapse-btn:hover { background:color-mix(in srgb, var(--btn-secondary-bg), #000 6%); text-decoration:none; }
.ts-btn:focus-visible, .collapse-btn:focus-visible { outline:none; box-shadow: var(--btn-focus-ring); }

/* Utility for full-width buttons */
.btn--block { width:100%; display:flex; }

/* Dark scheme fine-tuning */
@media (prefers-color-scheme: dark){
	.btn--ghost:hover { background:rgba(255,255,255,.08); }
	.ts-btn, .collapse-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--btn-outline-fg); }
	.ts-btn:hover, .collapse-btn:hover { background:rgba(255,255,255,.14); }
}

/* Provide graceful degradation if color-mix unsupported */
@supports not (color: color-mix(in srgb, red, white)) { .btn--outline:hover { background: rgba(0,0,0,.04); } }