/* ============================================
   BUTTONS — canonical button system
   ============================================
   Loaded by /docs/ui-kit (catalog) and by /docs/* (canonical layout).
   Production /tools, /, /pricing, etc. still ship the same .btn rules
   from style.css; this file is a clean lift-out so the docs surface
   no longer needs style.css just for buttons. The two definitions are
   intentionally identical — when the production migration runs in
   Phase 3, style.css drops these rules and btn.css becomes the only
   home.

   Contents:
   - .btn base + .btn svg + .btn-large / .btn-small / .btn-full sizes
   - Legacy .btn-primary + .btn-ghost (kept so catalog "before"
     pictures keep rendering — non-proposed articles in #buttons,
     #navigation, etc. demo the current site look)
   - Canonical .btn-primary-next + .btn-ghost-next + .btn-danger-next
     (with shared ping motion language) — proposed canonicals lifted
     out of ui-kit.css.
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-md);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
}

.btn svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

/* --- Sizes (composable on every variant) --- */
.btn-large {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-base);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: var(--font-md);
}

.btn-full {
    width: 100%;
}

/* ============================================
   LEGACY VARIANTS — current site look
   Kept here so catalog "before" articles render correctly
   without pulling in style.css. These rules are byte-identical
   to their counterparts in style.css.
   ============================================ */

.btn-primary {
    background: var(--gradient-primary);
    color: #000;
    box-shadow: var(--shadow-md), 0 0 20px var(--color-primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 30px var(--color-primary-glow);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-text-muted);
}

/* ============================================
   CANONICAL VARIANTS — *-next family
   Shared motion language: -1px lift on hover, lift returns to 0 on
   :active, brightness modulation, explicit :disabled (opacity 0.5 +
   cursor not-allowed), soft ping ring radiating from center on hover.
   ============================================ */

/* .btn-primary-next — proposed next look for .btn-primary.
   Drops the bloom glow for a crisp rim-lit plate; on hover the button
   lifts 1px, brightens slightly, and a soft white "ping" ring radiates
   from center, echoing the site's status-dot and IP-latency pulse
   vocabulary. Standalone — does not depend on .btn-primary. */
.btn.btn-primary-next {
    background: var(--gradient-primary);
    color: #000;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn.btn-primary-next::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.btn.btn-primary-next:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn.btn-primary-next:hover:not(:disabled)::after {
    animation: btnPrimaryNextPing 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.btn.btn-primary-next:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.97);
}

.btn.btn-primary-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes btnPrimaryNextPing {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* .btn-ghost-next — sister of .btn-primary-next.
   Same motion language: -1px lift on hover, no lift on press, brightness
   modulation. Bg fills subtly, border tightens, and a primary-tinted ping
   ring radiates from center (reuses the btnPrimaryNextPing keyframe). */
.btn.btn-ghost-next {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: var(--transition-fast);
}

.btn.btn-ghost-next::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-primary-rgb), 0.35);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.btn.btn-ghost-next:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-text-muted);
}

.btn.btn-ghost-next:hover:not(:disabled)::after {
    animation: btnPrimaryNextPing 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.btn.btn-ghost-next:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.9);
    background: rgba(255, 255, 255, 0.08);
}

.btn.btn-ghost-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* .btn-danger-next — destructive action variant.
   Same shape and motion as .btn-primary-next but with --color-error fill
   and a softer ping ring. For confirm-destroy, delete, sign-out flows. */
.btn.btn-danger-next {
    background: var(--color-error);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn.btn-danger-next::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.btn.btn-danger-next:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn.btn-danger-next:hover:not(:disabled)::after {
    animation: btnDangerNextPing 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.btn.btn-danger-next:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn.btn-danger-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes btnDangerNextPing {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}