/* Buttons
 * Primary: Flare→Golden gradient with glow hover.
 * Variants override via custom properties.
 */

@layer components {
  .btn {
    --btn-color: var(--color-link);
    --btn-text: oklch(100% 0 0);
    --btn-border-radius: var(--radius-pill);
    --btn-glow: oklch(var(--lch-flare) / 0.4);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space-s);
    min-height: var(--touch-min);
    padding: 0.5em 1.25em;
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    color: var(--btn-text);
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    border: 1px solid transparent;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 0 oklch(var(--lch-flare) / 0);
    transition: filter 100ms ease, box-shadow 200ms ease;

    &:hover {
      filter: brightness(1.1);
      box-shadow: 0 0 20px var(--btn-glow);
    }

    &:active {
      filter: brightness(0.95);
      box-shadow: 0 0 10px var(--btn-glow);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.4;
      filter: grayscale(1);
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  /* Outline variant */
  .btn--outline {
    --btn-text: var(--btn-color);

    background: transparent;
    border-color: var(--btn-color);

    &:hover {
      background: color-mix(in oklch, var(--btn-color) 8%, transparent);
      filter: none;
      box-shadow: 0 0 12px var(--btn-glow);
    }
  }

  /* Ghost variant (no border) */
  .btn--ghost {
    --btn-text: var(--btn-color);

    background: transparent;

    &:hover {
      background: color-mix(in oklch, var(--btn-color) 8%, transparent);
      filter: none;
      box-shadow: none;
    }
  }

  /* Danger variant */
  .btn--danger {
    --btn-color: var(--color-negative);
    --btn-glow: oklch(var(--lch-flare) / 0.3);

    background: var(--color-negative);
  }

  /* Small variant */
  .btn--sm {
    min-height: var(--touch-min);
    padding: 0.3em 0.75em;
    font-size: 0.875rem;
  }

  /* Circle icon button (icon + screen-reader text) */
  .btn:where(:has(.visually-hidden):has(img)),
  .btn:where(:has(.visually-hidden):has(svg)) {
    --btn-border-radius: 50%;

    min-width: var(--touch-min);
    min-height: var(--touch-min);
    aspect-ratio: 1;
    padding: 0.5em;
    background: var(--btn-color);
  }
}