/* MyEventos — Design tokens (identidade MyPharm oficial) */
:root {
    --me-brand: #E83467;
    --me-brand-dark: #D11E5C;
    --me-brand-hover: #B01650;
    --me-coral: #F26646;
    --me-coral-dark: #D54E2F;
    --me-gradient: linear-gradient(90deg, #E83467 0%, #F26646 100%);
    --me-gradient-diagonal: linear-gradient(135deg, #E83467 0%, #F26646 100%);
    --me-gradient-soft: linear-gradient(135deg, #fff1f4 0%, #ffffff 60%);
    --me-accent-blue: #1E3A6F;
    --me-accent-light: #60A5FA;
    --me-accent-gradient: linear-gradient(90deg, #1E3A6F 0%, #60A5FA 100%);
    --me-bg: #FAFAFA;
    --me-surface: #FFFFFF;
    --me-border: #E4E4E7;
    --me-text: #18181B;
    --me-text-2: #52525B;
    --me-text-muted: #71717A;
    --me-success: #16A34A;
    --me-warning: #EA580C;
    --me-danger: #DC2626;
    --me-info: #0891B2;
    --me-radius: 12px;
    --me-radius-lg: 20px;
    --me-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --me-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
    --me-shadow-brand: 0 8px 28px rgba(232, 52, 103, 0.28);
    --me-font: 'Poppins', system-ui, sans-serif;
    --me-sidebar: 252px;
    --me-sidebar-bg: #1a1d23;
    --bs-primary: #E83467;
    --bs-primary-rgb: 232, 52, 103;
    --bs-link-color: #D11E5C;
    --bs-body-font-family: var(--me-font);
    --bs-border-radius: 12px;
}

.text-brand-gradient {
    background: var(--me-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Variante para fundos escuros ou com gradiente (login, footer, hero):
   o gradiente magenta->coral some sobre esses fundos, então usamos branco
   sólido. Anula o background-clip/transparent herdados de .text-brand-gradient. */
.text-brand-gradient.on-dark,
.on-dark .text-brand-gradient {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

.bg-brand-gradient { background: var(--me-gradient); }

.btn-brand, .btn-primary-my {
    background: var(--me-gradient);
    border: none;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    box-shadow: var(--me-shadow-brand);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}
.btn-brand:hover, .btn-primary-my:hover {
    opacity: 0.95;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(232, 52, 103, 0.35);
}