/* ═══════════════════════════════════════════
   style.css — Tokens globais + Base
   Fatia da Vida · Doces Artesanais
═══════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  /* Design system Fatia: fundamentos reutilizáveis de interface. */
  --navy:     #1B3A5C;
  --ardosia:  #4A6B8A;
  --cerúleo:  #8BAFC8;
  --dourado:  #E8C97A;
  --creme:    #F5EDE0;
  --offwhite: #FDFAF6;
  --texto:    #1B3A5C;
  --wpp:      #25D366;

  --font-display: 'Playfair Display', serif;
  --font-body:    'Lato', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-card: 0 2px 16px rgba(27,58,92,0.08);
  --transition:  0.2s ease;

  --max-width: 1200px;

  --ds-surface: #fff;
  --ds-surface-subtle: #f0f4f8;
  --ds-border: #dce4ed;
  --ds-text-muted: var(--ardosia);
  --ds-danger: #c53030;
  --ds-focus-ring: 0 0 0 3px rgba(232, 201, 122, 0.4);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--offwhite);
  color: var(--texto);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── Tipografia base ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--navy); }
p { line-height: 1.7; }

/* ── Utilitários ── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Botões globais ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}
.btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary      { background: var(--navy);   color: var(--dourado); }
.btn-outline      { background: transparent;   color: var(--dourado); border: 1.5px solid var(--dourado); }
.btn-wpp          { background: var(--wpp);    color: #fff; }
.btn-outline-navy { background: transparent;   color: var(--navy);    border: 1.5px solid var(--navy); }

/* ── WhatsApp flutuante ── */
.wpp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  background: var(--wpp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.wpp-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,0.45); }
.wpp-float svg   { width: 28px; height: 28px; fill: #fff; }

/* ── Acessibilidade ── */
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }

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