/*
 * Motion and button states for the website, the legal and support pages and
 * the API docs: 1:1 with the dashboard (resources/js/components/ui/button.tsx
 * and resources/css/app.css). Change them together. Sizes stay per page.
 *
 * - Transitions: color, background, ring (box-shadow) and opacity, 150ms,
 *   cubic-bezier(0.4, 0, 0.2, 1) (Tailwind's default easing, used by the dashboard).
 * - Primary button: deep Renegade; Pig Iron on hover; 90% Pig Iron pressed.
 *   On dark surfaces, set --btn-hover / --btn-active (the dashboard's dark values).
 * - Ghost button: #E3E5E2 on hover (the dashboard's accent).
 * - Keyboard focus: a 3px Renegade ring at 50%, no outline.
 * - Reduced motion: no transitions or animations.
 */
:root {
    --weav-motion: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --btn-bg: #6a7568;
    --btn-fg: #ffffff;
    --btn-hover: #484848;
    --btn-active: rgba(72, 72, 72, 0.9);
    --btn-ghost-hover: #e3e5e2;
    --focus-ring: 0 0 0 3px rgba(141, 151, 140, 0.5);
}

a,
button,
summary,
input,
select,
textarea,
.btn,
.round {
    transition:
        color var(--weav-motion),
        background-color var(--weav-motion),
        box-shadow var(--weav-motion),
        opacity var(--weav-motion);
}

.btn {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
}
.btn:hover {
    background-color: var(--btn-hover);
    color: var(--btn-fg);
}
.btn:active {
    background-color: var(--btn-active);
}
.btn.ghost {
    background-color: transparent;
}
.btn.ghost:hover,
.btn.ghost:active {
    background-color: var(--btn-ghost-hover);
}
.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    pointer-events: none;
}
.btn:focus-visible,
.round:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}