/* =============================================================================
   5. COMPONENT — BUTTON
   Single reusable button component. `.btn` sets shared shape/behavior;
   modifier classes set color treatment only.
   ============================================================================= */
/* .btn and its variants. Depends on: tokens.css. Used by nearly every section — keep this loading before section files. */
.btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  width: auto;
  max-width: max-content;
  align-self: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  background-position: 0% 50%;
  background-size: 160% 160%;
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.22) inset;
  transition: background-position 0.45s var(--ease-out-expo), background var(--transition-slow),
    color var(--transition-slow), border-color var(--transition-slow), transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo), filter var(--transition-slow);
}

.btn__ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: currentColor !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
}

.btn--primary {
  background-image: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-accent) 52%, var(--color-glow-strong) 100%);
  color: var(--color-text-on-accent);
  border-color: color-mix(in oklch, var(--color-accent), white 20%);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--color-accent), transparent 68%),
    0 1px 0 oklch(100% 0 0 / 0.28) inset;
}

.btn--primary:hover {
  background-position: 100% 50%;
  color: var(--color-text-on-accent);
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px color-mix(in oklch, var(--color-accent), transparent 58%),
    0 0 0 1px color-mix(in oklch, var(--color-glow), transparent 60%),
    0 1px 0 oklch(100% 0 0 / 0.35) inset;
}

.btn--secondary {
  background-image: linear-gradient(135deg, color-mix(in oklch, var(--color-surface), transparent 8%), color-mix(in oklch, var(--color-accent-soft), transparent 60%));
  color: var(--color-text-primary);
  border-color: color-mix(in oklch, var(--color-border), var(--color-accent) 22%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.btn--secondary:hover {
  background-position: 100% 50%;
  border-color: var(--color-accent-border);
  color: var(--color-accent-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in oklch, var(--color-accent), transparent 84%),
    0 1px 0 oklch(100% 0 0 / 0.35) inset;
}

.btn--compact {
  padding: 0.6rem 1.35rem;
  font-size: var(--text-sm-alt);
}

/* Text link styled as a call-to-action with an animated underline/arrow. */
.btn--link {
  padding: 0;
  border-radius: 0;
  font-size: var(--text-base);
  color: var(--color-accent-strong);
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent), transparent 75%);
  box-shadow: none;
  background: none;
  transition: border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.btn--link:hover {
  border-bottom-color: var(--color-accent-strong);
  color: var(--color-text-primary);
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Shared dark-mode control states. More specific section/header rules retain
   their existing visual hierarchy while inheriting this accessible baseline. */
:root[data-theme="dark"] .btn--primary {
  background-image: linear-gradient(135deg, oklch(57% 0.2 278), oklch(64% 0.2 278) 54%, oklch(67% 0.17 215));
  color: var(--color-text-on-accent);
  border-color: color-mix(in oklch, var(--color-glow), white 14%);
  box-shadow: 0 10px 24px oklch(56% 0.19 278 / 0.26), 0 0 16px oklch(68% 0.18 215 / 0.08),
    0 1px 0 oklch(100% 0 0 / 0.28) inset;
}

:root[data-theme="dark"] .btn--primary:hover {
  color: var(--color-text-on-accent);
  box-shadow: 0 15px 30px oklch(56% 0.19 278 / 0.34), 0 0 22px oklch(68% 0.18 215 / 0.14),
    0 1px 0 oklch(100% 0 0 / 0.34) inset;
}

:root[data-theme="dark"] .btn--secondary {
  background-image: linear-gradient(135deg, oklch(23% 0.036 264 / 0.84), oklch(17% 0.03 264 / 0.76));
  border-color: color-mix(in oklch, var(--color-glow), transparent 68%);
  color: var(--color-text-primary);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.07) inset;
}

:root[data-theme="dark"] .btn--secondary:hover {
  border-color: var(--color-glow-border);
  color: var(--color-text-primary);
  box-shadow: 0 12px 26px oklch(2% 0.018 264 / 0.3), 0 0 16px oklch(68% 0.18 215 / 0.07);
}

:root[data-theme="dark"] .btn--link {
  color: var(--color-glow);
  border-bottom-color: color-mix(in oklch, var(--color-glow), transparent 62%);
}

:root[data-theme="dark"] .btn--link:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-glow);
}

:root[data-theme="dark"] .btn:focus-visible {
  outline: 2px solid var(--color-glow);
  outline-offset: 3px;
}

:root[data-theme="dark"] .btn:active {
  filter: brightness(0.96);
}

:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .btn[aria-disabled="true"] {
  background-image: none;
  background-color: oklch(24% 0.024 264 / 0.72);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}