/* Buttons
 * Primary: solid Flare with hover glow.
 * Variants: outline, ghost, danger, gradient (star/hero actions).
 * All buttons have 44px minimum touch target.
 */

@layer components {
  .btn {
    --btn-bg: oklch(var(--lch-flare));
    --btn-text: oklch(17% 0.02 276);
    --btn-glow: oklch(var(--lch-flare) / 0.3);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--touch-min);
    padding: 14px 20px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--btn-text);
    background: var(--btn-bg);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 150ms 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 oklch(var(--lch-flare));
      outline-offset: 2px;
    }

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

    & svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
  }

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

    background: transparent;
    border: 1px solid var(--color-border-interactive);

    &:hover {
      color: var(--color-ink);
      border-color: var(--color-ink-muted);
      background: color-mix(in oklch, var(--color-ink) 5%, transparent);
      filter: none;
      box-shadow: none;
    }
  }

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

    background: transparent;
    padding: 14px 12px;

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

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

  /* Gradient variant (star actions, hero CTAs) */
  .btn--gradient {
    background: linear-gradient(135deg, oklch(var(--lch-golden)), oklch(var(--lch-flare)));
  }

  /* Small variant */
  .btn--sm {
    min-height: var(--touch-min);
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* Full width */
  .btn--full {
    width: 100%;
  }

  /* Icon-only circle button */
  .btn--icon {
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    color: var(--color-ink-muted);

    &:hover {
      color: var(--color-ink);
      border-color: var(--color-ink-muted);
      filter: none;
      box-shadow: none;
    }

    & svg {
      width: 18px;
      height: 18px;
    }
  }

  /* FAB (floating action button) */
  .fab {
    position: fixed;
    bottom: calc(4rem + 16px);
    right: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: oklch(var(--lch-flare));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(17% 0.02 276);
    box-shadow: 0 4px 20px oklch(var(--lch-flare) / 0.3);
    cursor: pointer;
    min-height: var(--touch-min);
    z-index: 5;
    transition: filter 150ms ease, box-shadow 200ms ease;

    &:hover {
      filter: brightness(1.1);
      box-shadow: 0 4px 24px oklch(var(--lch-flare) / 0.5);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }

    & svg {
      width: 22px;
      height: 22px;
    }
  }
}