/* ═══════════════════════════════════════════════════════════════════
   components/buttons.css

   Button components using semantic tokens.
   ═══════════════════════════════════════════════════════════════════ */

@layer components {
    .btn {
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-base);
        /* Smooth-easing transitions make hover/active feedback feel more
           tactile than the default linear interpolation. Same easing
           token used by .card so the dashboard's microinteractions
           read consistently. */
        transition:
            background-color var(--duration-fast) var(--ease-smooth),
            border-color var(--duration-fast) var(--ease-smooth),
            box-shadow var(--duration-fast) var(--ease-smooth),
            transform var(--duration-fast) var(--ease-smooth);
    }

    .btn:hover {
        transform: scale(1.02);
    }

    /* Active state — subtle 1px press-down. Pairs with the lift hover
       on cards to give a consistent "press" interaction across the UI. */
    .btn:active {
        transform: translateY(1px);
    }

    .btn-primary {
        /* Subtle vertical gradient — a 7% darker bottom edge gives the
           button a soft "lit from above" feel that's the hallmark of
           modern primary CTAs (Stripe, Linear, Vercel). Single color
           reads as flat by comparison. The gradient is gentle enough
           that the button still feels like one solid color at a glance. */
        background: linear-gradient(
          180deg,
          var(--color-primary) 0%,
          color-mix(in srgb, var(--color-primary) 93%, black) 100%
        );
        border: none;
        box-shadow: var(--shadow-sm);
        color: var(--color-white);
    }

    .btn-primary:hover {
        /* On hover the gradient inverts subtly (slightly lighter top,
           keeps the dark bottom) so the button looks "pressed forward"
           toward the viewer. Plus the elevated shadow + transform from
           .btn base rule pulls it off the surface. */
        background: linear-gradient(
          180deg,
          var(--color-primary-hover) 0%,
          color-mix(in srgb, var(--color-primary-hover) 92%, black) 100%
        );
        box-shadow: var(--shadow-md);
        color: var(--color-white);
    }

    /* `:focus-visible` (not `:focus`) so the focus ring only shows for
       keyboard navigation, not after mouse clicks. Mouse focus traps the
       ring visually until the user clicks elsewhere — a UX wart called
       "sticky focus ring". */
    .btn-primary:focus-visible {
        box-shadow: 0 0 0 2px var(--surface-bg), 0 0 0 4px var(--color-primary);
    }

    .btn-secondary {
        background: var(--surface-base);
        border: 1px solid var(--border-base);
        color: var(--color-text-base);
    }

    .btn-secondary:hover {
        background: var(--surface-muted);
        border-color: var(--border-base);
    }

    .btn-outline-secondary {
        background: transparent;
        border: 1px solid var(--border-base);
        color: var(--color-text-base);
    }

    .btn-outline-secondary:hover {
        background: var(--surface-muted);
    }
}