/* ==========================================================================
   BOCÃO — Componentes base
   Depende de tokens.css. Nenhum valor hardcoded aqui: só var(--bc-*).
   ========================================================================== */

/* ---------- Base ---------- */
.bc-root {
  background: var(--bc-surface-canvas);
  color: var(--bc-text-primary);
  font-family: var(--bc-font-body);
  font-size: var(--bc-fs-base);
  line-height: var(--bc-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografia ---------- */
.bc-display {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-fw-black);
  text-transform: uppercase;
  line-height: var(--bc-lh-tight);
  letter-spacing: var(--bc-ls-tighter);
  font-size: clamp(2.25rem, 7vw, var(--bc-fs-6xl));
}
.bc-display--accent { color: var(--bc-text-accent); }

.bc-h1 { font-family: var(--bc-font-display); text-transform: uppercase; font-size: var(--bc-fs-4xl); line-height: var(--bc-lh-tight); }
.bc-h2 { font-family: var(--bc-font-display); text-transform: uppercase; font-size: var(--bc-fs-3xl); line-height: var(--bc-lh-snug); }
.bc-h3 { font-family: var(--bc-font-body); font-weight: var(--bc-fw-bold); font-size: var(--bc-fs-xl); line-height: var(--bc-lh-snug); }

.bc-kicker {
  font-family: var(--bc-font-body);
  font-weight: var(--bc-fw-semibold);
  font-size: var(--bc-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--bc-ls-wider);
  color: var(--bc-text-accent);
}
.bc-body { font-size: var(--bc-fs-base); color: var(--bc-text-secondary); }
.bc-caption { font-size: var(--bc-fs-sm); color: var(--bc-text-muted); }

/* ---------- Botões ---------- */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  min-height: 48px;               /* alvo de toque WCAG */
  padding: var(--bc-space-3) var(--bc-space-6);
  border: none;
  border-radius: var(--bc-radius-pill);
  font-family: var(--bc-font-body);
  font-weight: var(--bc-fw-bold);
  font-size: var(--bc-fs-base);
  text-transform: uppercase;
  letter-spacing: var(--bc-ls-wide);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--bc-duration-fast) var(--bc-ease-standard),
              filter var(--bc-duration-fast) var(--bc-ease-standard),
              background-color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-btn:focus-visible {
  outline: 3px solid var(--bc-border-focus);
  outline-offset: 3px;
}
.bc-btn:disabled,
.bc-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Primário — o botão dourado com relevo. É a assinatura da marca: 1 por tela. */
.bc-btn--primary {
  background: var(--bc-gradient-gold-button);
  color: var(--bc-text-on-yellow);
  box-shadow: var(--bc-shadow-cta);
}
.bc-btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.bc-btn--primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--bc-yellow-800), 0 4px 10px rgba(0,0,0,0.5);
}

/* Secundário — contorno amarelo sobre preto. */
.bc-btn--secondary {
  background: transparent;
  color: var(--bc-text-accent);
  box-shadow: inset 0 0 0 2px var(--bc-yellow);
}
.bc-btn--secondary:hover:not(:disabled) { background: rgba(255, 201, 30, 0.12); }

/* Fantasma — ações terciárias, nunca competindo com o CTA. */
.bc-btn--ghost {
  background: transparent;
  color: var(--bc-text-secondary);
  box-shadow: inset 0 0 0 1px var(--bc-border-default);
}
.bc-btn--ghost:hover:not(:disabled) { color: var(--bc-text-primary); background: rgba(255,255,255,0.06); }

/* WhatsApp — canal de venda principal; merece cor própria. */
.bc-btn--whatsapp {
  background: var(--bc-success);
  color: #062E16;
  box-shadow: 0 6px 0 var(--bc-success-dark), 0 10px 20px rgba(0,0,0,0.5);
}
.bc-btn--whatsapp:hover:not(:disabled) { filter: brightness(1.06); }
.bc-btn--whatsapp:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--bc-success-dark); }

.bc-btn--sm { min-height: 38px; padding: var(--bc-space-2) var(--bc-space-4); font-size: var(--bc-fs-sm); }
.bc-btn--lg { min-height: 60px; padding: var(--bc-space-4) var(--bc-space-10); font-size: var(--bc-fs-lg); }
.bc-btn--block { display: flex; width: 100%; }

.bc-btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.bc-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--bc-radius-full);
  color: var(--bc-text-on-yellow);
  animation: bc-spin 700ms linear infinite;
}
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */
.bc-card {
  background: var(--bc-surface-raised);
  border: 1px solid var(--bc-border-subtle);
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-5);
  box-shadow: var(--bc-shadow-md);
}
.bc-card--interactive { cursor: pointer; transition: border-color var(--bc-duration-normal) var(--bc-ease-standard), transform var(--bc-duration-normal) var(--bc-ease-standard); }
.bc-card--interactive:hover { border-color: var(--bc-border-strong); transform: translateY(-2px); }
.bc-card--interactive:focus-visible { outline: 3px solid var(--bc-border-focus); outline-offset: 3px; }

/* Card de produto do cardápio */
.bc-card-product { display: grid; grid-template-columns: 88px 1fr; gap: var(--bc-space-4); align-items: center; }
.bc-card-product__img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--bc-radius-md); }
.bc-card-product__name { font-weight: var(--bc-fw-bold); font-size: var(--bc-fs-lg); }
.bc-card-product__desc { font-size: var(--bc-fs-sm); color: var(--bc-text-muted); }
.bc-card-product__price { font-family: var(--bc-font-display); font-size: var(--bc-fs-xl); color: var(--bc-text-accent); }

/* ---------- Badge ---------- */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  padding: var(--bc-space-1) var(--bc-space-3);
  border-radius: var(--bc-radius-pill);
  font-size: var(--bc-fs-xs);
  font-weight: var(--bc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--bc-ls-wide);
}
.bc-badge--promo   { background: var(--bc-yellow); color: var(--bc-text-on-yellow); }
.bc-badge--novo    { background: var(--bc-danger); color: var(--bc-neutral-0); }
.bc-badge--aberto  { background: rgba(37, 211, 102, 0.18); color: var(--bc-success); }
.bc-badge--fechado { background: rgba(255,255,255,0.10); color: var(--bc-text-muted); }

/* ---------- Campos ---------- */
.bc-field { display: flex; flex-direction: column; gap: var(--bc-space-2); }
.bc-label { font-size: var(--bc-fs-sm); font-weight: var(--bc-fw-semibold); color: var(--bc-text-secondary); }
.bc-input {
  min-height: 48px;
  padding: var(--bc-space-3) var(--bc-space-4);
  background: var(--bc-surface-overlay);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-md);
  color: var(--bc-text-primary);
  font-family: var(--bc-font-body);
  font-size: var(--bc-fs-base);   /* 16px: evita zoom automático no iOS */
  transition: border-color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-input::placeholder { color: var(--bc-text-muted); }
.bc-input:focus { outline: none; border-color: var(--bc-border-focus); box-shadow: 0 0 0 3px rgba(255,201,30,0.25); }
.bc-input[aria-invalid="true"] { border-color: var(--bc-danger); }
.bc-help { font-size: var(--bc-fs-xs); color: var(--bc-text-muted); }
.bc-error { font-size: var(--bc-fs-xs); color: var(--bc-danger); font-weight: var(--bc-fw-semibold); }

/* ---------- Sessão / layout ---------- */
.bc-section { padding: var(--bc-space-16) var(--bc-space-5); }
.bc-container { width: 100%; max-width: 1200px; margin-inline: auto; }

/* Hero no padrão das peças: foto + máscara preta + texto à esquerda */
.bc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: var(--bc-space-10) var(--bc-space-6);
  background: var(--bc-black);
  overflow: hidden;
}
.bc-hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.bc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,0.85) 45%, rgba(5,5,5,0.15) 100%); }
.bc-hero__content { position: relative; max-width: 46ch; display: flex; flex-direction: column; gap: var(--bc-space-5); }

/* ---------- Divisor ---------- */
.bc-divider { height: 1px; background: var(--bc-border-subtle); border: 0; }
.bc-divider--gold { height: 3px; background: var(--bc-gradient-gold-text); border-radius: var(--bc-radius-pill); width: 64px; }