/**
 * AquariumLesson Button Contract
 *
 * Phase 2 opt-in button system. This file only styles the AquariumLesson
 * `.al-btn` contract and does not target native buttons, WooCommerce,
 * Elementor, WordPress block buttons, or legacy button classes.
 *
 * Cascade note: this file intentionally uses regular cascade selectors because
 * older global `.al-btn` rules exist in the site shell. Variant selectors use
 * `.al-btn.al-btn--...` so deliberate design-system buttons can win without
 * targeting foreign button systems.
 */

.al-btn {
  --al-btn-bg: var(--al-color-surface-card);
  --al-btn-bg-hover: var(--al-color-surface-raised);
  --al-btn-bg-active: var(--al-color-surface-subtle);
  --al-btn-border: var(--al-color-border-default);
  --al-btn-border-hover: var(--al-color-border-strong);
  --al-btn-color: var(--al-color-text-ink);
  --al-btn-color-hover: var(--al-btn-color);
  --al-btn-shadow: var(--al-shadow-subtle);
  --al-btn-shadow-hover: var(--al-shadow-raised);
  --al-btn-shadow-active: var(--al-shadow-subtle);
  --al-btn-hover-y: -1px;
  --al-btn-active-y: 0;
  --al-btn-padding-x: var(--al-space-20);
  --al-btn-gap: var(--al-space-8);
  --al-btn-icon-size: var(--al-control-icon-default);
  --al-btn-min-height: var(--al-control-height-default);
  --al-btn-radius: var(--al-radius-pill);
  --al-btn-font-size: var(--al-font-size-sm);
  --al-btn-line-height: 1.1;

  /* Compatibility for legacy rules that still read these variables. */
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-btn-gap);
  min-block-size: var(--al-btn-min-height);
  max-inline-size: 100%;
  padding-block: 0;
  padding-inline: var(--al-btn-padding-x);
  border: 1px solid var(--al-btn-border);
  border-radius: var(--al-btn-radius);
  background: var(--al-btn-bg);
  color: var(--al-btn-color);
  -webkit-text-fill-color: var(--al-btn-color);
  box-shadow: var(--al-btn-shadow);
  font-family: var(--al-font-family-body);
  font-size: var(--al-btn-font-size);
  font-weight: var(--al-font-weight-semibold);
  line-height: var(--al-btn-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--al-motion-normal) var(--al-ease-standard),
    background var(--al-motion-normal) var(--al-ease-standard),
    border-color var(--al-motion-normal) var(--al-ease-standard),
    box-shadow var(--al-motion-normal) var(--al-ease-standard),
    color var(--al-motion-normal) var(--al-ease-standard),
    opacity var(--al-motion-fast) var(--al-ease-standard),
    transform var(--al-motion-fast) var(--al-ease-standard);
}

.al-btn:hover {
  color: var(--al-btn-color-hover);
  -webkit-text-fill-color: var(--al-btn-color-hover);
  text-decoration: none;
}

@media (hover: hover) {
  .al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):hover {
    --al-accent: var(--al-btn-bg-hover);
    --al-brand: var(--al-btn-bg-hover);

    border-color: var(--al-btn-border-hover);
    background: var(--al-btn-bg-hover);
    box-shadow: var(--al-btn-shadow-hover);
    transform: translateY(var(--al-btn-hover-y));
  }
}

.al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):active {
  --al-accent: var(--al-btn-bg-active);
  --al-brand: var(--al-btn-bg-active);

  background: var(--al-btn-bg-active);
  box-shadow: var(--al-btn-shadow-active);
  transform: translateY(var(--al-btn-active-y));
}

.al-btn:focus {
  outline: none;
}

.al-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--al-btn-shadow), var(--al-shadow-focus-ring);
}

.al-btn:disabled,
.al-btn[aria-disabled="true"],
.al-btn.is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.al-btn.is-loading,
.al-btn[aria-busy="true"],
.al-btn[data-loading="true"] {
  opacity: 0.74;
  cursor: progress;
  pointer-events: none;
  transform: none;
}

.al-btn > svg,
.al-btn .al-btn__icon {
  flex: 0 0 auto;
  inline-size: var(--al-btn-icon-size);
  block-size: var(--al-btn-icon-size);
}

.al-btn > svg {
  display: block;
  fill: none;
  stroke: currentColor;
}

.al-btn.al-btn--primary {
  --al-btn-bg: linear-gradient(135deg, #173f2c 0%, var(--al-color-moss) 56%, #407f5c 100%);
  --al-btn-bg-hover: linear-gradient(135deg, #123624 0%, #2f7350 52%, #4a8b67 100%);
  --al-btn-bg-active: linear-gradient(135deg, #123624 0%, #285f43 100%);
  --al-btn-border: rgba(var(--al-color-soft-aqua-rgb), 0.38);
  --al-btn-border-hover: rgba(var(--al-color-organic-highlight-rgb), 0.56);
  --al-btn-color: var(--al-color-text-inverse);
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 2px 6px rgba(var(--al-color-deep-moss-rgb), 0.16),
    0 14px 30px rgba(var(--al-color-deep-moss-rgb), 0.24);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 3px 8px rgba(var(--al-color-deep-moss-rgb), 0.18),
    0 18px 36px rgba(var(--al-color-deep-moss-rgb), 0.30);
  --al-btn-shadow-active:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 8px 18px rgba(var(--al-color-deep-moss-rgb), 0.20);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--secondary {
  --al-btn-bg: linear-gradient(180deg, #ffffff 0%, #f2f8f4 100%);
  --al-btn-bg-hover: linear-gradient(180deg, #ffffff 0%, #eaf5ef 100%);
  --al-btn-bg-active: #e4f0e9;
  --al-btn-border: rgba(var(--al-color-moss-rgb), 0.24);
  --al-btn-border-hover: rgba(var(--al-color-moss-rgb), 0.36);
  --al-btn-color: var(--al-color-deep-moss);
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 2px 5px rgba(var(--al-color-deep-moss-rgb), 0.05),
    0 8px 20px rgba(var(--al-color-deep-moss-rgb), 0.09);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 2px 6px rgba(var(--al-color-deep-moss-rgb), 0.07),
    0 12px 26px rgba(var(--al-color-deep-moss-rgb), 0.12);
  --al-btn-shadow-active:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 5px 14px rgba(var(--al-color-deep-moss-rgb), 0.08);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--ghost {
  --al-btn-bg: rgba(var(--al-color-moss-rgb), 0.015);
  --al-btn-bg-hover: rgba(var(--al-color-moss-rgb), 0.055);
  --al-btn-bg-active: rgba(var(--al-color-moss-rgb), 0.085);
  --al-btn-border: rgba(var(--al-color-moss-rgb), 0.10);
  --al-btn-border-hover: rgba(var(--al-color-moss-rgb), 0.16);
  --al-btn-color: var(--al-color-text-muted);
  --al-btn-color-hover: var(--al-color-deep-moss);
  --al-btn-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-active: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-hover-y: 0;
  --al-btn-active-y: 0;
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--ghost-inverse {
  --al-btn-bg: rgba(255, 255, 255, 0.035);
  --al-btn-bg-hover: rgba(255, 255, 255, 0.09);
  --al-btn-bg-active: rgba(255, 255, 255, 0.13);
  --al-btn-border: rgba(255, 255, 255, 0.12);
  --al-btn-border-hover: rgba(255, 255, 255, 0.22);
  --al-btn-color: rgba(255, 255, 255, 0.80);
  --al-btn-color-hover: var(--al-color-text-inverse);
  --al-btn-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-active: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-hover-y: 0;
  --al-btn-active-y: 0;
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--soft {
  --al-btn-bg: linear-gradient(180deg, rgba(var(--al-color-moss-rgb), 0.095) 0%, rgba(var(--al-color-soft-aqua-rgb), 0.10) 100%);
  --al-btn-bg-hover: linear-gradient(180deg, rgba(var(--al-color-moss-rgb), 0.13) 0%, rgba(var(--al-color-soft-aqua-rgb), 0.15) 100%);
  --al-btn-bg-active: rgba(var(--al-color-moss-rgb), 0.16);
  --al-btn-border: rgba(var(--al-color-moss-rgb), 0.12);
  --al-btn-border-hover: rgba(var(--al-color-moss-rgb), 0.20);
  --al-btn-color: var(--al-color-deep-moss);
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.60) inset,
    0 5px 14px rgba(var(--al-color-deep-moss-rgb), 0.055);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.70) inset,
    0 8px 18px rgba(var(--al-color-deep-moss-rgb), 0.075);
  --al-btn-shadow-active: 0 3px 10px rgba(var(--al-color-deep-moss-rgb), 0.055);
  --al-btn-hover-y: 0;
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--outline {
  --al-btn-bg: rgba(255, 255, 255, 0.54);
  --al-btn-bg-hover: rgba(var(--al-color-moss-rgb), 0.055);
  --al-btn-bg-active: rgba(var(--al-color-moss-rgb), 0.09);
  --al-btn-border: rgba(var(--al-color-deep-moss-rgb), 0.28);
  --al-btn-border-hover: rgba(var(--al-color-moss-rgb), 0.48);
  --al-btn-color: var(--al-color-deep-moss);
  --al-btn-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-hover: 0 3px 10px rgba(var(--al-color-deep-moss-rgb), 0.055);
  --al-btn-shadow-active: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-hover-y: 0;
  --al-btn-active-y: 0;
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--link {
  --al-btn-bg: transparent;
  --al-btn-bg-hover: rgba(var(--al-color-moss-rgb), 0.055);
  --al-btn-bg-active: rgba(var(--al-color-moss-rgb), 0.09);
  --al-btn-border: transparent;
  --al-btn-border-hover: transparent;
  --al-btn-color: var(--al-color-moss);
  --al-btn-color-hover: var(--al-color-deep-moss);
  --al-btn-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-shadow-active: 0 0 0 rgba(0, 0, 0, 0);
  --al-btn-hover-y: 0;
  --al-btn-active-y: 0;
  --al-btn-min-height: 32px;
  --al-btn-padding-x: var(--al-space-8);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--glass,
.al-btn.al-btn--hero-secondary {
  --al-btn-bg: rgba(255, 255, 255, 0.10);
  --al-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --al-btn-bg-active: rgba(255, 255, 255, 0.08);
  --al-btn-border: rgba(255, 255, 255, 0.18);
  --al-btn-border-hover: rgba(255, 255, 255, 0.30);
  --al-btn-color: var(--al-color-text-inverse);
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 8px 20px rgba(0, 0, 0, 0.14);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 12px 26px rgba(0, 0, 0, 0.18);
  --al-btn-shadow-active:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 6px 16px rgba(0, 0, 0, 0.12);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.al-btn.al-btn--danger {
  --al-btn-bg: var(--al-color-danger);
  --al-btn-bg-hover: #a83f3f;
  --al-btn-bg-active: #913535;
  --al-btn-border: rgba(145, 53, 53, 0.34);
  --al-btn-border-hover: rgba(145, 53, 53, 0.48);
  --al-btn-color: var(--al-color-text-inverse);
  --al-btn-shadow: 0 10px 24px rgba(145, 53, 53, 0.18);
  --al-btn-shadow-hover: 0 14px 30px rgba(145, 53, 53, 0.24);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--success {
  --al-btn-bg: linear-gradient(135deg, #256f49 0%, var(--al-color-success) 58%, #4b9168 100%);
  --al-btn-bg-hover: linear-gradient(135deg, #1f5e3e 0%, #347f58 58%, #579b73 100%);
  --al-btn-bg-active: linear-gradient(135deg, #1f5e3e 0%, #2f704d 100%);
  --al-btn-border: rgba(47, 125, 85, 0.42);
  --al-btn-border-hover: rgba(47, 125, 85, 0.58);
  --al-btn-color: var(--al-color-text-inverse);
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 24px rgba(47, 125, 85, 0.20);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 30px rgba(47, 125, 85, 0.25);
  --al-btn-shadow-active: 0 7px 16px rgba(47, 125, 85, 0.18);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--warning {
  --al-btn-bg: linear-gradient(180deg, #fff6df 0%, #f7e3b4 100%);
  --al-btn-bg-hover: linear-gradient(180deg, #fff8e7 0%, #f4d896 100%);
  --al-btn-bg-active: #efd08a;
  --al-btn-border: rgba(181, 121, 34, 0.34);
  --al-btn-border-hover: rgba(181, 121, 34, 0.50);
  --al-btn-color: #5d3c0d;
  --al-btn-shadow:
    0 1px 0 rgba(255, 255, 255, 0.70) inset,
    0 8px 20px rgba(181, 121, 34, 0.12);
  --al-btn-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.80) inset,
    0 12px 26px rgba(181, 121, 34, 0.16);
  --al-btn-shadow-active: 0 5px 14px rgba(181, 121, 34, 0.13);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--small {
  --al-btn-min-height: var(--al-control-height-small);
  --al-btn-padding-x: var(--al-space-16);
  --al-btn-icon-size: var(--al-control-icon-small);
  --al-btn-font-size: var(--al-font-size-xs);
}

.al-btn.al-btn--large {
  --al-btn-min-height: var(--al-control-height-large);
  --al-btn-padding-x: var(--al-space-24);
  --al-btn-icon-size: var(--al-control-icon-large);
  --al-btn-font-size: var(--al-font-size-md);
}

.al-btn.al-btn--icon {
  --al-btn-padding-x: 0;

  inline-size: var(--al-btn-min-height);
  min-inline-size: var(--al-btn-min-height);
}

.al-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-12);
}

@media (max-width: 520px) {
  .al-btn-group {
    gap: var(--al-space-8);
  }

  .al-btn {
    min-block-size: max(var(--al-btn-min-height), 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .al-btn {
    transition: none;
  }

  .al-btn:hover,
  .al-btn:active {
    transform: none;
  }
}