/* =========================================================
   DetoConcilia — estilos próprios
   Tailwind resolve 95% do visual. Aqui ficam apenas:
   - tokens que o Tailwind CDN não cobre
   - microinterações
   - ajustes de acessibilidade
   - utilidades de animação
   ========================================================= */

:root {
    --deto-primary:        #16A34A;
    --deto-primary-dark:   #15803D;
    --deto-primary-light:  #DCFCE7;
    --deto-secondary:      #2563EB;
    --deto-secondary-dark: #1D4ED8;
    --deto-secondary-light:#DBEAFE;
    --deto-surface:        #FFFFFF;
    --deto-surface-soft:   #F8FAFC;
    --deto-border:         #E2E8F0;
    --deto-text:           #0F172A;
    --deto-text-muted:     #64748B;
    --deto-danger:         #DC2626;
    --deto-warning:        #D97706;

    --deto-radius:         0.75rem;
    --deto-transition:     180ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; }

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: optimizeLegibility;
}

/* Foco visível e consistente */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--deto-secondary);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* ---------- Microinterações ---------- */
@keyframes deto-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.deto-fade-in { animation: deto-fade-in var(--deto-transition) both; }

@keyframes deto-pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.deto-pulse-dot { animation: deto-pulse-dot 1.6s ease-in-out infinite; }

/* ---------- Botão pressed ---------- */
.deto-btn-pressed {
    transform: translateY(1px);
    transition: transform var(--deto-transition);
}

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

/* ---------- Utilidade: trunca linhas ---------- */
.deto-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Scrollbar discreta (desktop) ---------- */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 9999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }
}