/**
 * TOKENS.CSS — Design tokens compartilhados.
 * Carregado por <link> antes de site.css e de admin.css: uma definição
 * só, sem drift entre as duas folhas de estilo (problema da versão
 * anterior).
 */
:root {
    /* A paleta e so clara — nao existe versao escura desta identidade.
       Declarar isso e o que impede o Chrome no Android (e o Samsung
       Internet) de aplicar o escurecimento automatico em quem esta com
       o celular no modo escuro: sem a declaracao o navegador inverte
       fundo e texto sozinho, e a marca sai diferente em cada aparelho.
       Tambem alinha controles de formulario, barra de rolagem e o
       menu suspenso do <select>, que herdam este esquema. */
    color-scheme: light;

    /* Marca */
    --rose:      #C8183A;
    --rose-dark: #9E0E2C;
    --rose-soft: #F9E4E9;
    --ink:       #18100E;
    --cream:     #FDF7F2;

    /* Neutros */
    --white:     #FFFFFF;
    --muted:     #7A6165;
    --border:    #EDD8DE;
    --surface:   #F7F2F3;

    /* Semânticos */
    --green:      #0F7A4A;
    --green-soft: #D6F0E3;
    --blue:       #2563EB;
    --blue-soft:  #DBEAFE;
    --violet:     #7C3AED;
    --violet-soft:#EDE9FE;
    --amber:      #D97706;
    --amber-soft: #FEF3C7;
    --danger:     #DC2626;
    --whatsapp:   #25D366;

    /* Raio */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Sombra */
    --shadow-sm: 0 2px 8px rgba(24, 16, 14, .06);
    --shadow-md: 0 8px 28px rgba(24, 16, 14, .10);
    --shadow-rose: 0 10px 30px rgba(200, 24, 58, .18);

    /* Tipografia — uma familia so, sem serifa.
       --font-display existe apenas para nao quebrar quem ja o usa;
       aponta para a mesma fonte. A hierarquia vem de peso, tamanho e
       espacamento, nao de trocar de tipo no meio da pagina. */
    --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
    --font-display: var(--font-sans);

    /* Espaçamento */
    --gap-xs: 8px;
    --gap-sm: 14px;
    --gap-md: 24px;
    --gap-lg: 40px;
    --gap-xl: 72px;
    --section-y: 96px;

    /* Transição */
    --t-fast: .15s ease;
    --t-base: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo [hidden] precisa vencer qualquer `display` de classe.
   Sem isto, cartoes como .product (display: flex) continuam visiveis
   mesmo com el.hidden = true — foi o que quebrava o filtro do catalogo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

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

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* SweetAlert2 — alinhado à identidade */
.swal-popup       { font-family: var(--font-sans) !important; border-radius: var(--r-md) !important; }
.swal-confirm     {
    background: var(--rose) !important; color: #fff !important;
    font: 600 14px/1 var(--font-sans) !important;
    padding: 13px 26px !important; border: 0 !important;
    border-radius: var(--r-sm) !important; cursor: pointer !important;
    margin: 0 6px !important;
}
.swal-confirm:hover { background: var(--rose-dark) !important; }
.swal-cancel      {
    background: transparent !important; color: var(--muted) !important;
    font: 500 14px/1 var(--font-sans) !important;
    padding: 13px 22px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-sm) !important; cursor: pointer !important;
    margin: 0 6px !important;
}