/* ═══════════════════════════════════════════
   DOCES FLOR — THEME COMPARTILHADO
   Usado por: pedidos (DEV_index_pedidos.html) e cardápio (público)
   Extraído em 06/07/2026 a partir dos dois arquivos originais.
═══════════════════════════════════════════ */

/* Fontes — carregar ANTES deste arquivo no <head>:
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap" rel="stylesheet">
*/

/* ── RESET (idêntico nos dois arquivos originais) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── PALETA DE CORES
     Usei a versão de pedidos.html como base (é um superset).
     O cardápio usava só uma parte destas mesmas variáveis, com os
     mesmos valores — nada muda visualmente pro cardápio. ── */
:root {
    --brown-dark:    #1F3D26;
    --brown-mid:     #5C2A0E;
    --brown-warm:    #8B4513;
    --amber:         #E2622D;
    --amber-light:   #F0916A;
    --cream:         #F7F9F4;
    --cream-dark:    #E8EFE4;
    --green:         #3D6B46;
    --white:         #FFFFFF;
    --text-body:     #1F3D26;
    --shadow:        rgba(20,40,28,0.15);
    --shadow-strong: rgba(20,40,28,0.30);
    --red:           #e53935;
    --blue:          #5b8def;

    /* Caixinhas de aviso/erro/sucesso (fundo + texto) — usadas em
       dezenas de telas do painel. Antes eram hex fixo espalhado; agora
       são variáveis, então o modo escuro ajusta tudo de uma vez. */
    --aviso-bg:      #FEF3C7;
    --aviso-texto:   #92400E;
    --erro-bg:       #FEE2E2;
    --erro-texto:    #991B1B;
    --sucesso-bg:    #D1FAE5;
    --sucesso-texto: #065F46;

    /* fundo "de marca" fixo — header, footer, login, gaveta, botões
       marrons, badges, tabs ativas etc. NUNCA inverte com o tema. */
    --surface-brand:      #234830;
    --surface-brand-mid:  #2E5A3B;
    --on-surface-brand:   #F7F9F4; /* texto claro fixo, usado em cima do --surface-brand */

    /* fundo do círculo da logo — mesma lógica acima */
    --logo-ring-bg:  var(--surface-brand);

    /* aliases em português usados em pedidos.html */
    --laranja:        var(--amber);
    --laranja-escuro:  #C9522A;
    --laranja-claro:   var(--amber-light);
    --marrom:          var(--brown-dark);
    --marrom-medio:    var(--brown-warm);
    --bege:            var(--cream);
    --bege-escuro:     var(--cream-dark);
    --verde:           var(--green);
    --branco:          var(--white);
}

/* ── MODO ESCURO ──
   Ativado via atributo data-theme="dark" no <html> (ver shared/utils.js).
   Como quase todo o site usa var(--cor) em vez de hex direto, trocar
   estes valores já reflete na maioria das telas automaticamente. */
[data-theme="dark"] {
    --brown-dark:    #D9EEDD;
    --brown-mid:     #E2B98D;
    --brown-warm:    #C9A57C;
    --cream:         #10160F;
    --cream-dark:    #2A3A2C;
    --white:         #1B2620;
    --text-body:     #E3EDE0;
    --shadow:        rgba(0,0,0,0.45);
    --shadow-strong: rgba(0,0,0,0.65);
    --green:         #74B98A;
    --red:           #EF5350;
    --blue:          #7FA8F5;

    /* Caixinhas de aviso/erro/sucesso — versão escura (fundo escurecido,
       texto claro, mantendo o "clima" de cada cor mas com contraste bom) */
    --aviso-bg:      #3D2E0A;
    --aviso-texto:   #FCD34D;
    --erro-bg:       #3D1414;
    --erro-texto:    #FCA5A5;
    --sucesso-bg:    #0F2E1F;
    --sucesso-texto: #6EE7B7;
    /* --surface-brand, --surface-brand-mid, --on-surface-brand e
       --logo-ring-bg NÃO são sobrescritas aqui de propósito — header,
       footer, login, gaveta e botões marrons continuam fixos nos dois temas */
}

body { transition: background-color .2s ease, color .2s ease; }

/* ── BOTÃO DE ALTERNAR TEMA ── */
.btn-toggle-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    color: var(--brown-dark);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-toggle-tema:hover { transform: scale(1.06); }

/* ── BASE DO BODY (idêntico nos dois arquivos originais;
     cada site pode sobrescrever padding-top/overflow se precisar) ── */
body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--cream);
    color: var(--text-body);
    overflow-x: hidden;
}

/* ── LOGO ANIMADO (login e topo de pedidos, header do cardápio)
     ATENÇÃO: no original, pedidos.html flutuava -6px e o cardápio
     flutuava -8px — não eram idênticos. Unifiquei com uma custom
     property, com -8px como padrão. Se quiser o valor antigo de
     pedidos.html, defina --logo-float-distance: 6px onde for usar. ── */
@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-1 * var(--logo-float-distance, 8px))); }
}

.logo-ring-anim {
    border-radius: 50%;
    border: 3px solid var(--amber);
    padding: 4px;
    background: var(--logo-ring-bg);
    box-shadow: 0 0 0 1px rgba(226,98,45,0.3), 0 12px 30px rgba(0,0,0,0.4);
    animation: floatLogo 4s ease-in-out infinite;
}
.logo-ring-anim img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}