/* Quitutes da Ruiva — tema tirado da logo: creme, coral, rosa pastel e xadrez azul de toalha de mesa */
:root {
  --coral: #C9503F;        /* letreiro da logo */
  --coral-escuro: #A63E30;
  --rosa: #E8A3A3;         /* vermelho pastel quase rosa */
  --rosa-claro: #FBE7E4;
  --azul: #A9C8E8;
  --azul-forte: #6F95BC;
  --azul-claro: #E7F0F9;
  --gingham-claro: rgba(169, 200, 232, .55);
  --gingham-escuro: rgba(111, 149, 188, .45);
  --bg: #FBF5EC;           /* creme do fundo da logo */
  --card: #FFFDF9;
  --papel: #FBF0DE;        /* papel dos cartões do cardápio */
  --fg: #4A2B2E;
  --muted: #8C6F6A;
  --line: #EEDCD3;
  --ok: #2F7D55;
  --erro: #B3261E;
  --sobre-coral: #FFFFFF;
  --sobre-azul: #FFFFFF;
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral: #F08A78; --coral-escuro: #F6A596; --rosa: #E8A3A3; --rosa-claro: #3A2527;
    --azul: #7FA6CF; --azul-forte: #A9C8E8; --azul-claro: #1F2A36;
    --gingham-claro: rgba(127, 166, 207, .22); --gingham-escuro: rgba(127, 166, 207, .22);
    --bg: #1E1817; --card: #282020; --papel: #312624; --fg: #F6E8E4; --muted: #BBA19B; --line: #403230;
    --ok: #6DD39A; --erro: #FF8A80; --sobre-coral: #2A1512; --sobre-azul: #16202B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --coral: #F08A78; --coral-escuro: #F6A596; --rosa: #E8A3A3; --rosa-claro: #3A2527;
  --azul: #7FA6CF; --azul-forte: #A9C8E8; --azul-claro: #1F2A36;
  --gingham-claro: rgba(127, 166, 207, .22); --gingham-escuro: rgba(127, 166, 207, .22);
  --bg: #1E1817; --card: #282020; --papel: #312624; --fg: #F6E8E4; --muted: #BBA19B; --line: #403230;
  --ok: #6DD39A; --erro: #FF8A80; --sobre-coral: #2A1512; --sobre-azul: #16202B;
  color-scheme: dark;
}

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5 }
[hidden] { display: none !important }
img { max-width: 100% }

.gingham {
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, var(--gingham-claro) 50%, transparent 50%),
    linear-gradient(var(--gingham-claro) 50%, transparent 50%);
  background-size: 32px 32px;
}

.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  background: var(--coral); color: var(--sobre-coral);
  padding: 12px 22px; border-radius: 99px; box-shadow: 0 4px 0 var(--coral-escuro);
  transition: transform .1s, box-shadow .1s; text-align: center; text-decoration: none; display: inline-block;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-escuro) }
.btn:disabled { opacity: .6; cursor: progress }
.btn.sec { background: var(--card); color: var(--coral); border: 2px solid var(--coral); box-shadow: none; padding: 10px 18px }
:focus-visible { outline: 3px solid var(--azul-forte); outline-offset: 2px }

input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%;
}
textarea { min-height: 76px; resize: vertical }
.invalid { border-color: var(--erro) !important }
.err { color: var(--erro); font-size: .86rem; font-weight: 700 }
.err:empty { display: none }

.titulo { font-family: var(--font-display); font-weight: 800; color: var(--coral); text-wrap: balance; letter-spacing: -.01em }
.slogan { text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; font-weight: 700; color: var(--coral) }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }