/* =========================================================
 * Acai Amizade — Clube Amizade
 * Custom CSS layer (extends Tailwind via CDN)
 * ======================================================= */

:root {
    --brand-50:  #FBF6FF;
    --brand-100: #F4E8FB;
    --brand-200: #E5C8F2;
    --brand-300: #C896DD;
    --brand-400: #A664C7;
    --brand-500: #8540AE;
    --brand-600: #6B2D8C;
    --brand-700: #54237D;
    --brand-800: #3D1A52;
    --leaf-400:  #7AB733;
    --leaf-500:  #5A8C26;
    --sun:       #FBBF24;
}

* { -webkit-tap-highlight-color: transparent; }

html, body { overscroll-behavior-y: none; }
body { font-feature-settings: "ss01", "cv11"; }

/* ---------- Buttons ----------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    padding: .85rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(107,45,140,.45);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    will-change: transform;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled],
.btn-primary[data-busy="1"] {
    opacity: .7;
    cursor: progress;
    pointer-events: none;
}
.btn-primary[data-busy="1"]::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: var(--brand-100);
    color: var(--brand-700);
    padding: .7rem 1.1rem;
    font-weight: 600; font-size: .9rem;
    transition: background-color .15s ease;
}
.btn-ghost:hover { background: var(--brand-200); }

/* ---------- Skeleton loaders -------------------------- */
.skeleton {
    background: linear-gradient(90deg, #ECECF0 0%, #F6F6F8 50%, #ECECF0 100%);
    background-size: 468px 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 16px;
}
@keyframes shimmer {
    0%   { background-position: -468px 0; }
    100% { background-position:  468px 0; }
}

/* ---------- Cards ------------------------------------- */
.card {
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(107,45,140,.12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:active { transform: scale(.99); }

/* ---------- Inputs (refines Tailwind base) ------------ */
input, textarea, select {
    font: inherit;
    color: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* ---------- Toasts ------------------------------------ */
.toast {
    pointer-events: auto;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .25s cubic-bezier(.21,1,.32,1), opacity .25s ease;
    background: #111827;
    color: #fff;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
    max-width: 90vw;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #166534; }
.toast.error   { background: #991B1B; }

/* ---------- Bottom safe spacer ------------------------ */
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 1rem); }

/* ---------- Reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}