/* ============================================================================
   BUTTONS — canonical .uk-btn system + deprecated .btn shims
   ============================================================================
   ⚠️  DEPRECATED MIGRATION SHIMS  ⚠️
   ----------------------------------------------------------------------------
   Every rule lists TWO class names: the canonical .uk-btn / .uk-btn-large /
   .uk-btn-small / .uk-btn-full and the legacy unprefixed shim (.btn,
   .btn-large, .btn-small, .btn-full). The .uk-btn-primary / .uk-btn-ghost /
   .uk-btn-danger variant compounds pair both bases (.uk-btn.uk-btn-primary,
   .btn.uk-btn-primary) so the live tool pages — which still ship class=\"btn
   uk-btn-primary …\" markup — keep rendering during the namespace migration.

       Replacement      ──  use .uk-btn / .uk-btn-large / .uk-btn-small /
                            .uk-btn-full in new markup.
       Live consumers   ──  /, /locations, /product-news, /uptime-monitoring,
                            /education (.btn .btn-primary legacy bloom look,
                            styled by style.css), and /docs/* + /docs/ui-kit
                            + the 7 /tools pages (.btn .uk-btn-primary
                            rim-lit canonical, styled here).
       Remove when      ──  each consumer page swaps its blade markup from
                            .btn / .btn-large / etc. to .uk-btn / .uk-btn-large
                            / etc.  When all dual selectors collapse to single
                            .uk-* selectors, the migration is done.

   LEGACY VARIANTS — .btn-primary + .btn-ghost
   ----------------------------------------------------------------------------
   The legacy variant blocks at the bottom of this file (.btn-primary +
   .btn-ghost — the bloom-glow look) are byte-identical to their style.css
   counterparts. They are NOT aliased: the canonical .uk-btn-primary +
   .uk-btn-ghost are the visual replacements, with a distinct rim-lit + ping
   ring design. Removing the legacy block depends on /, /locations, …
   migrating off the bloom look.
   ============================================================================ */

.uk-btn,
.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;
}

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

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

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

.uk-btn-full,
.btn-full {
    width: 100%;
}

/* ============================================
   LEGACY VARIANTS — current site bloom-glow 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. NOT aliased — .uk-btn-primary /
   .uk-btn-ghost below are the canonical visual replacements.
   ============================================ */

.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 — .uk-btn-primary / .uk-btn-ghost / .uk-btn-danger
   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.
   ============================================ */

/* .uk-btn-primary — canonical primary action.
   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. */
.uk-btn.uk-btn-primary,
.btn.uk-btn-primary {
    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);
}

.uk-btn.uk-btn-primary::after,
.btn.uk-btn-primary::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;
}

.uk-btn.uk-btn-primary:hover:not(:disabled),
.btn.uk-btn-primary: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);
}

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

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

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

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

/* .uk-btn-ghost — sister of .uk-btn-primary.
   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 ukBtnPing keyframe). */
.uk-btn.uk-btn-ghost,
.btn.uk-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: var(--transition-fast);
}

.uk-btn.uk-btn-ghost::after,
.btn.uk-btn-ghost::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;
}

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

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

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

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

/* .uk-btn-danger — destructive action variant.
   Same shape and motion as .uk-btn-primary but with --color-error fill
   and a softer ping ring. For confirm-destroy, delete, sign-out flows. */
.uk-btn.uk-btn-danger,
.btn.uk-btn-danger {
    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);
}

.uk-btn.uk-btn-danger::after,
.btn.uk-btn-danger::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;
}

.uk-btn.uk-btn-danger:hover:not(:disabled),
.btn.uk-btn-danger: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);
}

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

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

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

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