/* ==========================================================================
   Shoopet — Tokens
   Fonte única de verdade do Design System.
   Nenhum arquivo deve usar cor, espaçamento ou raio fora desta lista.
   ========================================================================== */

:root {
    /* ---------- Marca ---------- */
    --azul-50:  #EFF6FF;
    --azul-100: #DBEAFE;
    --azul-200: #BFDBFE;
    --azul-500: #3B82F6;
    --azul-600: #2563EB;  /* cor primária */
    --azul-700: #1D4ED8;  /* hover */

    --cor-primaria: var(--azul-600);
    --cor-primaria-hover: var(--azul-700);
    --cor-primaria-suave: var(--azul-50);

    /* ---------- Superfícies ---------- */
    --fundo: #FFFFFF;
    --fundo-secundario: #F8FAFC;
    --fundo-elevado: #FFFFFF;
    --borda: #E2E8F0;
    --borda-forte: #CBD5E1;

    /* ---------- Texto ---------- */
    --texto: #0F172A;
    --texto-secundario: #64748B;
    --texto-suave: #94A3B8;
    --texto-invertido: #FFFFFF;

    /* ---------- Estados ---------- */
    --sucesso: #22C55E;
    --sucesso-suave: #F0FDF4;
    --aviso: #F59E0B;
    --aviso-suave: #FFFBEB;
    --erro: #EF4444;
    --erro-suave: #FEF2F2;

    /* ---------- Tipografia ---------- */
    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --texto-h1: 32px;
    --texto-h2: 24px;
    --texto-h3: 20px;
    --texto-base: 16px;
    --texto-pequeno: 14px;
    --texto-mini: 13px;

    /* ---------- Espaçamento (escala fixa) ---------- */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;
    --e7: 48px;
    --e8: 64px;

    /* ---------- Raio ---------- */
    --raio: 12px;
    --raio-pequeno: 8px;
    --raio-grande: 16px;
    --raio-circulo: 999px;

    /* ---------- Sombras (discretas, apenas profundidade) ---------- */
    --sombra-1: 0 1px 2px rgba(15, 23, 42, .04);
    --sombra-2: 0 4px 12px rgba(15, 23, 42, .06);
    --sombra-3: 0 12px 32px rgba(15, 23, 42, .10);
    --foco: 0 0 0 3px rgba(37, 99, 235, .18);

    /* ---------- Movimento ---------- */
    --transicao: 200ms cubic-bezier(.4, 0, .2, 1);

    /* ---------- Layout ---------- */
    --largura-sidebar: 248px;
    --altura-header: 64px;
    --largura-conteudo: 1280px;
}

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
    :root { --transicao: 1ms linear; }
}