/* Button. Single source of truth - see
   _internal/dev/COMPONENT-REFERENCE.md#button. Shadcn-inspired: fixed
   heights per size, consistent gap, subtle shadow on solid variants,
   focus-visible ring, active micro-press, disabled state. */

.btn {
  --btn-h: 2.5rem;           /* fixed height, drives alignment on rows */
  --btn-px: 1rem;
  --btn-gap: 0.5rem;
  --btn-fs: var(--fs-sm);
  --btn-radius: var(--radius-md);
  --btn-shadow: none;
  --btn-ring: color-mix(in oklch, var(--color-foreground) 22%, transparent);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-family: var(--font-text);
  font-size: var(--btn-fs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-foreground);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--btn-shadow);
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    var(--btn-shadow, 0 0 #0000),
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--btn-ring);
}

.btn:active {
  transform: translateY(0.5px);
}

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

.btn__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.btn__label { min-width: 0; }

/* --- Sizes ---------------------------------------------------------- */

.btn--sm {
  --btn-h: 2rem;
  --btn-px: 0.75rem;
  --btn-gap: 0.375rem;
  --btn-fs: 0.8125rem;
  --btn-radius: var(--radius-sm);
}
.btn--md {
  --btn-h: 2.5rem;
  --btn-px: 1rem;
  --btn-gap: 0.5rem;
  --btn-fs: var(--fs-sm);
  --btn-radius: var(--radius-md);
}
.btn--lg {
  --btn-h: 3rem;
  --btn-px: 1.375rem;
  --btn-gap: 0.625rem;
  --btn-fs: 0.9375rem;
  --btn-radius: var(--radius-md);
}

/* --- Shape modifiers ----------------------------------------------- */

.btn--pill { border-radius: 9999px; }

.btn--full {
  display: flex;
  width: 100%;
}

/* Icon-only: square footprint matching the height. */
.btn--icon-only {
  padding: 0;
  width: var(--btn-h);
  gap: 0;
}
.btn--icon-only.btn--pill { border-radius: 9999px; }

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

/* Solid - primary action. Reads from --color-primary/foreground so it
   auto-inverts on dark surfaces (those scopes re-map the token). */
.btn--solid {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: var(--color-primary);
  --btn-shadow: 0 1px 0 0 color-mix(in oklch, var(--color-primary-foreground) 18%, transparent) inset,
                0 1px 2px rgb(16 17 20 / 8%);
}
.btn--solid:hover {
  background: color-mix(in oklch, var(--color-primary) 90%, var(--color-background));
  border-color: color-mix(in oklch, var(--color-primary) 90%, var(--color-background));
}
.btn--solid:active {
  --btn-shadow: 0 1px 1px rgb(16 17 20 / 6%);
}

/* Solid tone=brand: uses teal→blue gradient, keeps white text. */
.btn--solid.btn--tone-brand {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
  --btn-shadow:
    0 1px 0 0 rgb(255 255 255 / 20%) inset,
    0 6px 18px -6px color-mix(in oklch, var(--brand-teal) 70%, transparent);
}
.btn--solid.btn--tone-brand:hover {
  filter: brightness(1.06);
}

/* Outline - secondary. 1px border, transparent fill, soft hover. */
.btn--outline {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-border);
}
.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border-color: color-mix(in oklch, var(--color-border) 70%, var(--color-foreground));
}

/* Ghost - tertiary. No chrome at rest, accent wash on hover. */
.btn--ghost {
  background: transparent;
  color: var(--color-foreground);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* Glass - frosted. For use on photography, hero, or dark brand strips.
   Works on any surface; the backdrop-filter carries contrast without
   relying on an opaque background. */
.btn--glass {
  background: color-mix(in oklch, var(--color-foreground) 7%, transparent);
  color: var(--color-foreground);
  border-color: color-mix(in oklch, var(--color-foreground) 16%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  --btn-shadow:
    0 1px 0 0 color-mix(in oklch, var(--color-foreground) 14%, transparent) inset,
    0 6px 20px -8px rgb(16 17 20 / 20%);
}
.btn--glass:hover {
  background: color-mix(in oklch, var(--color-foreground) 12%, transparent);
  border-color: color-mix(in oklch, var(--color-foreground) 24%, transparent);
}

/* Link - inline text. No size padding, optional icon. */
.btn--link {
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-foreground);
  border-radius: 0;
  --btn-gap: 0.25rem;
  --btn-shadow: none;
}
.btn--link .btn__label {
  background-image: linear-gradient(currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease);
}
.btn--link:hover {
  color: var(--brand-teal);
}
.btn--link:hover .btn__label {
  background-size: 100% 1px;
}
.btn--link:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--btn-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Hover micro-motion on icons ------------------------------------ */

/* Nudge trailing arrow icons on hover for CTA affordance. */
.btn--solid:hover .btn__icon,
.btn--outline:hover .btn__icon,
.btn--glass:hover .btn__icon,
.btn--link:hover .btn__icon {
  transform: translateX(2px);
}
.btn__icon {
  transition: transform var(--dur-fast) var(--ease);
}

/* --- Button groups -------------------------------------------------- */

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.btn-group--stack { flex-direction: column; align-items: stretch; }