/* =============================================================================
   Abençoe ME — Tokens de design e primitivos compartilhados
   Paleta em OKLCH. Índigo/violeta como marca; branco puro como superfície.
   ========================================================================== */

:root {
    /* Marca */
    --brand:        oklch(0.45 0.18 270);
    --brand-strong: oklch(0.38 0.17 270);
    --brand-press:  oklch(0.33 0.15 270);
    --brand-soft:   oklch(0.955 0.028 270);
    --brand-ring:   oklch(0.62 0.16 270 / 0.45);

    /* Acento dourado (velatura litúrgica — uso parcimonioso) */
    --gold:         oklch(0.76 0.11 85);
    --gold-soft:    oklch(0.95 0.04 85);

    /* Superfícies e tinta */
    --bg:           oklch(1 0 0);
    --surface:      oklch(0.986 0.004 270);
    --surface-2:    oklch(0.965 0.006 270);
    --ink:          oklch(0.22 0.02 270);
    --ink-soft:     oklch(0.37 0.02 270);
    --muted:        oklch(0.50 0.015 270);

    /* Bordas */
    --border:       oklch(0.912 0.008 270);
    --border-strong:oklch(0.84 0.012 270);

    /* Estados semânticos */
    --success:      oklch(0.55 0.13 155);
    --success-soft: oklch(0.955 0.04 155);
    --danger:       oklch(0.55 0.19 25);
    --danger-soft:  oklch(0.955 0.04 25);
    --warning:      oklch(0.72 0.14 75);
    --warning-soft: oklch(0.96 0.05 75);
    --info:         var(--brand);
    --info-soft:    var(--brand-soft);

    /* Tipografia */
    --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Literata", ui-serif, Georgia, "Times New Roman", serif;

    /* Raio, sombra, espaço */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 2px oklch(0.30 0.03 270 / 0.06),
                 0 1px 3px oklch(0.30 0.03 270 / 0.05);
    --shadow-md: 0 4px 12px oklch(0.30 0.03 270 / 0.08),
                 0 2px 4px oklch(0.30 0.03 270 / 0.05);
    --shadow-lg: 0 12px 32px oklch(0.30 0.03 270 / 0.12),
                 0 4px 8px oklch(0.30 0.03 270 / 0.06);

    /* Escala de z-index semântica */
    --z-dropdown: 1000;
    --z-sticky:   1100;
    --z-backdrop: 1200;
    --z-modal:    1300;
    --z-toast:    1400;
    --z-tooltip:  1500;

    --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset enxuto ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; text-wrap: balance; }

/* --- Botões ---------------------------------------------------------------- */
.btn {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 550;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-primary {
    --btn-bg: var(--brand);
    --btn-fg: oklch(0.99 0 0);
    border-color: transparent;
}
.btn-primary:hover { --btn-bg: var(--brand-strong); }
.btn-primary:active { --btn-bg: var(--brand-press); }

.btn-ghost { --btn-bg: transparent; border-color: transparent; }
.btn-ghost:hover { --btn-bg: var(--surface-2); }

.btn-danger { --btn-bg: transparent; --btn-fg: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover { --btn-bg: var(--danger-soft); border-color: var(--danger); }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* --- Formulários ----------------------------------------------------------- */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field > label { font-weight: 550; font-size: 0.9rem; color: var(--ink-soft); }
.field .hint { font-size: 0.82rem; color: var(--muted); }

.input, .select, .textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.input:disabled, .select:disabled { background: var(--surface-2); opacity: 0.7; }
.textarea { resize: vertical; min-height: 90px; }

/* --- Alertas / flash ------------------------------------------------------- */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
}
.alert-success { background: var(--success-soft); border-color: var(--success); color: oklch(0.35 0.09 155); }
.alert-error   { background: var(--danger-soft);  border-color: var(--danger);  color: oklch(0.40 0.14 25); }
.alert-info    { background: var(--brand-soft);   border-color: var(--brand);   color: var(--brand-press); }

/* --- Badges ---------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    background: var(--surface-2); color: var(--ink-soft);
}
.badge-published { background: var(--success-soft); color: oklch(0.38 0.09 155); }
.badge-draft     { background: var(--warning-soft); color: oklch(0.42 0.10 75); }

/* --- Utilidades ------------------------------------------------------------ */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}