/* Identidade PeddiAQ no login, cadastro e admin (carregado pelo topo.ejs só em /admin).
   Azul #3949AB, laranja #F28C52, grafite #252525, branco; Sora nos títulos, Manrope nos textos. */
:root {
  --peddi-azul: #3949AB; --peddi-laranja: #F28C52; --peddi-grafite: #252525;
  --shari: #FFFFFF; --shoyu: var(--peddi-grafite); --gergelim: #ECEEF7;
  --marinho: var(--peddi-azul);            /* barra do admin, painéis da marca */
  --wasabi: var(--peddi-laranja);          /* traço da página atual, checks, destaques */
  --cor: var(--peddi-azul); --cor-forte: var(--peddi-azul); --cor-texto: var(--peddi-azul); --anel: var(--peddi-azul);
  --cor-clara: var(--peddi-laranja); --anel-claro: var(--peddi-laranja);
  --fundo: #F5F6FB; --texto: var(--peddi-grafite);
  --mudo: color-mix(in srgb, var(--peddi-grafite) 70%, #fff);
  --fundo-suave: #ECEEF7; --superficie: #fff;
  --borda: color-mix(in srgb, var(--peddi-grafite) 14%, #fff);
  --borda-campo: color-mix(in srgb, var(--peddi-grafite) 22%, #fff);
  --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Sora", var(--fonte);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1C1C20; --texto: #fff; --superficie: #26262C; --fundo-suave: #2D2D34;
    --mudo: color-mix(in srgb, #fff 70%, #1C1C20);
    --borda: color-mix(in srgb, #fff 14%, #1C1C20); --campo: #2D2D34; --borda-campo: color-mix(in srgb, #fff 24%, #1C1C20);
    --cor-texto: var(--peddi-laranja); --anel: var(--peddi-laranja); /* o azul não tem contraste no grafite */
  }
}
h1, h2, h3, .admin-menu__atual, .login__painel h1 { font-family: var(--fonte-titulo); letter-spacing: -.015em; }
/* laranja leva texto grafite (branco não passa contraste) */
.selo--ok, .atalho__marca { color: var(--peddi-grafite); }

/* ---------- barra do admin com o logo ---------- */
.admin-menu__marca { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-right: .5rem; }
.admin-menu .admin-menu__marca { padding: 0 .25rem; border-radius: var(--raio); }
.admin-menu .admin-menu__marca::after { display: none; }
.admin-menu__marca { --logo-altura: 24px; }
.admin-menu__atual { font-size: var(--t1); opacity: .9; }
@media (max-width: 380px) { .admin-menu__atual { display: none; } }

/* ---------- login e cadastro: painel azul da marca no lugar da foto ---------- */
.login__foto--peddi { display: grid; place-items: center; background: var(--peddi-azul); }
/* as curvas laranja da identidade, em dois cantos */
.login__foto--peddi::before, .login__foto--peddi::after { content: ""; position: absolute; border: 3px solid var(--peddi-laranja); border-radius: 50%; pointer-events: none; }
.login__foto--peddi::before { width: 340px; height: 340px; top: -250px; left: -150px; border-color: transparent var(--peddi-laranja) var(--peddi-laranja) transparent; right: auto; bottom: auto; }
.login__foto--peddi::after { width: 300px; height: 300px; right: -170px; bottom: -200px; background: color-mix(in srgb, #000 22%, var(--peddi-azul)); border-color: var(--peddi-laranja) transparent transparent transparent; top: auto; left: auto; }
.login__foto--peddi .login__marca { position: relative; inset: auto; z-index: 1; display: grid; justify-items: center; gap: .6rem; text-align: center; }
.login__peddi { width: min(220px, 56vw); height: auto; }
.login__foto--peddi .login__frase { margin: 0; font: 600 var(--t2)/1.2 var(--fonte-titulo); color: #fff; }
@media (min-width: 900px) {
  .login__foto--peddi::before { width: 620px; height: 620px; top: -420px; left: -260px; }
  .login__foto--peddi::after { width: 560px; height: 560px; right: -300px; bottom: -340px; }
  .login__peddi { width: min(380px, 70%); }
  .login__foto--peddi .login__frase { font-size: var(--t4); }
}

/* ---------- botões no admin: cantos de 12px (como o ícone da marca), secundário em tom suave em vez de pílula contornada ---------- */
.botao { border-radius: 12px; }
.botao--icone { border-radius: 50%; }
.botao--sec { background: var(--fundo-suave); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.botao--sec::before { background: color-mix(in srgb, var(--peddi-azul) 16%, var(--fundo-suave)); }
@media (hover: hover) and (pointer: fine) {
  .botao--sec:hover, .botao--sec:focus-visible { box-shadow: inset 0 0 0 1.5px var(--peddi-azul); }
}
@media (prefers-color-scheme: dark) {
  .botao--sec::before { background: color-mix(in srgb, var(--peddi-azul) 30%, var(--fundo-suave)); }
}