/*!
 * FoxFarma Shop — theme skin (P3)
 * Camada de identidade sobre o build default do Bagisto 2.4.11.
 * Tokens extraídos da identidade verificada de foxfarma.com (tema claro,
 * Inter + Space Grotesk) com acento #1266EC (CLAUDE.md).
 * Carregado DEPOIS do CSS compilado do tema default — mesma especificidade,
 * últimas declarações vencem. Não editar o build default.
 */

/* ==========================================================================
   1. Fontes (OFL, auto-hospedadas; mesmo conjunto da referência)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca (CLAUDE.md) na escala da identidade verificada */
  --fx-primary: #1266EC;
  --fx-primary-strong: #0D54C2;
  --fx-primary-soft: #E7EFFC;
  --fx-primary-tint: #CFDFF9;
  --fx-on-primary: #FFFFFF;
  --fx-accent: #22D3EE; /* decorativo apenas, como na referência */

  /* Tinta e neutros (identidade verificada) */
  --fx-ink: #0A1E3C;
  --fx-ink-secondary: #3D5270;
  --fx-ink-muted: #556A8E;
  --fx-bg: #F4F7FB;
  --fx-surface: #FFFFFF;
  --fx-fill: #EEF3FA;            /* preenchimentos sutis (ex.: bg-gray-100) */
  --fx-fill-strong: #E2EAF4;     /* hovers de fundo */
  --fx-border: #DCE5F0;          /* bordas decorativas */
  --fx-border-input: #6B7A93;    /* bordas de controles (≥3:1 sobre superfície) */

  --fx-success: #0E7B3D;
  --fx-danger: #C22A2A;

  --fx-font-heading: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --fx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fx-radius-sm: 8px;
  --fx-radius-md: 12px;
  --fx-radius-lg: 16px;

  --fx-shadow-card: 0 1px 2px rgba(10, 30, 60, 0.05), 0 10px 28px rgba(10, 30, 60, 0.08);
  --fx-shadow-hover: 0 2px 6px rgba(10, 30, 60, 0.07), 0 16px 36px rgba(10, 30, 60, 0.12);

  --fx-dur-fast: 140ms;
  --fx-dur-med: 240ms;
  --fx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

html {
  font-family: var(--fx-font-body);
}

body {
  background-color: var(--fx-bg);
  color: var(--fx-ink);
  font-family: var(--fx-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fx-font-heading);
  letter-spacing: -0.01em;
}

/* Títulos renderizados por utilitários herdam a tinta da marca */
.text-navyBlue { color: var(--fx-ink); }
.font-dmserif { font-family: var(--fx-font-heading); }
.font-poppins, .font-sans { font-family: var(--fx-font-body); }

::selection {
  background-color: rgba(18, 102, 236, 0.18);
}

/* Foco visível consistente (teclado) */
:focus-visible {
  outline: 2px solid var(--fx-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   4. Remapeamento da paleta (utilitários Tailwind do build default → tokens)
   Cobres as classes usadas por views Blade e pelos componentes Vue (mesma
   origem de compilação). Mesma especificidade; este arquivo carrega depois.
   ========================================================================== */

/* --- Fundos --- */
.bg-white { background-color: var(--fx-surface); }
.bg-navyBlue { background-color: var(--fx-primary); }
.bg-black { background-color: var(--fx-ink); }
.bg-lightOrange { background-color: var(--fx-bg); }
.bg-darkBlue { background-color: var(--fx-primary-strong); }
.bg-blue-500 { background-color: var(--fx-primary); }
.bg-blue-400 { background-color: var(--fx-primary); }
.bg-gray-50 { background-color: #F8FAFD; }
.bg-gray-100 { background-color: var(--fx-fill); }
.bg-gray-200 { background-color: var(--fx-fill-strong); }
.bg-gray-500 { background-color: var(--fx-ink-muted); }
.bg-gray-600 { background-color: var(--fx-ink-secondary); }
.bg-gray-800 { background-color: var(--fx-ink); }
.bg-red-50 { background-color: #FBEDED; }
.bg-red-100 { background-color: #F6DDDD; }
.bg-emerald-50 { background-color: #E8F5EC; }
.bg-emerald-100 { background-color: #D2EBDA; }

/* --- Texto --- */
.text-black { color: var(--fx-ink); }
.text-gray-200 { color: #C7D3E3; }
.text-gray-300 { color: #A9B8CC; }
.text-gray-400 { color: var(--fx-ink-muted); }
.text-gray-500 { color: var(--fx-ink-muted); }
.text-gray-600 { color: var(--fx-ink-secondary); }
.text-gray-700 { color: var(--fx-ink-secondary); }
.text-gray-800 { color: var(--fx-ink); }
.text-gray-900 { color: var(--fx-ink); }
.text-blue-600 { color: var(--fx-primary); }
.text-blue-700 { color: var(--fx-primary-strong); }
.text-blue-800 { color: var(--fx-primary-strong); }
.text-red-500, .text-red-600 { color: var(--fx-danger); }
.text-red-700, .text-red-800, .text-red-900 { color: #A02222; }
.text-emerald-400, .text-emerald-500, .text-emerald-600 { color: var(--fx-success); }
.text-emerald-700, .text-emerald-800 { color: #0B6A34; }
.fill-blue-600 { fill: var(--fx-primary); }

/* --- Bordas e anéis --- */
.border-white { border-color: #FFFFFF; }
.border-black { border-color: var(--fx-ink); }
.border-gray-200 { border-color: var(--fx-border); }
.border-gray-300 { border-color: var(--fx-border); }
.border-gray-400 { border-color: var(--fx-border-input); }
.border-navyBlue { border-color: var(--fx-primary); }
.border-red-500 { border-color: var(--fx-danger); }
.border-red-100 { border-color: #F0D5D5; }
.border-emerald-200 { border-color: #BFE0CB; }
.ring-navyBlue { --tw-ring-color: var(--fx-primary); }
.ring-black { --tw-ring-color: var(--fx-ink); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fx-border); }
.divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fx-border); }
.placeholder\:text-gray-400::placeholder { color: var(--fx-ink-muted); }

/* --- Variantes hover/focus/active (mesma mecânica) --- */
.hover\:bg-gray-50:hover { background-color: #F8FAFD; }
.hover\:bg-gray-100:hover { background-color: var(--fx-fill); }
.hover\:bg-gray-200:hover { background-color: var(--fx-fill-strong); }
.hover\:bg-gray-800:hover { background-color: var(--fx-ink); }
.hover\:bg-black:hover { background-color: var(--fx-ink); }
.hover\:bg-blue-400:hover { background-color: var(--fx-primary-strong); }
.hover\:border-gray-400:hover { border-color: var(--fx-border-input); }
.hover\:border-navyBlue:hover { border-color: var(--fx-primary-strong); }
.hover\:text-white:hover { color: #FFFFFF; }
.hover\:text-black:hover { color: var(--fx-ink); }
.hover\:text-gray-800:hover { color: var(--fx-ink); }
.hover\:text-blue-600:hover { color: var(--fx-primary); }
.hover\:text-blue-800:hover { color: var(--fx-primary-strong); }

/* Foco de controles ganha acento da marca (afordância clara) */
.focus\:border-gray-400:focus,
.focus\:border-blue-500:focus { border-color: var(--fx-primary); }
.focus\:ring-navyBlue:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-blue-300:focus { --tw-ring-color: var(--fx-primary); }
.focus\:ring-black:focus { --tw-ring-color: var(--fx-ink); }
.focus\:text-black:focus { color: var(--fx-ink); }
.focus\:bg-gray-100:focus { background-color: var(--fx-fill); }
.active\:border-gray-300:active { border-color: var(--fx-border); }

/* ==========================================================================
   5. Componentes-chave do tema default que levam a identidade
   ========================================================================== */

/* Botões primário/secundário (definidos com @apply bg-navyBlue no upstream) */
.primary-button {
  background-color: var(--fx-primary);
  border-color: var(--fx-primary);
  border-radius: var(--fx-radius-md);
  transition: background-color var(--fx-dur-fast) var(--fx-ease-out);
}
.primary-button:hover {
  background-color: var(--fx-primary-strong);
  border-color: var(--fx-primary-strong);
}
.secondary-button {
  color: var(--fx-primary-strong);
  border-color: var(--fx-primary);
  border-radius: var(--fx-radius-md);
  background-color: var(--fx-surface);
  transition: background-color var(--fx-dur-fast) var(--fx-ease-out);
}
.secondary-button:hover {
  background-color: var(--fx-primary-soft);
}

/* Seleção e link */
a { text-underline-offset: 2px; }

/* Botões/links Vue genéricos (v-button) usam utilitários — cobertos acima. */

/* Shimmer/skeleton em tons da identidade */
.shimmer {
  background: linear-gradient(to right, #F4F7FB 8%, #EBF1F8 18%, #F4F7FB 33%);
}

/* ==========================================================================
   6. Formulários e controles
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-radius: var(--fx-radius-sm);
  border-color: var(--fx-border-input);
  transition: border-color var(--fx-dur-fast) var(--fx-ease-out);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
  border-color: var(--fx-primary);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--fx-primary);
}

label {
  color: var(--fx-ink-secondary);
}

.required:after {
  color: var(--fx-danger);
}

/* Estados de formulário */
.text-\[red\] {
  color: var(--fx-danger);
}

/* ==========================================================================
   7. Movimento e acessibilidade
   ========================================================================== */

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

/* Hover de cards: elevação curta e sutil (sem blur/glass pesado) */
@media (prefers-reduced-motion: no-preference) {
  .box-shadow-hover,
  .hover\:shadow:hover {
    transition: box-shadow var(--fx-dur-med) var(--fx-ease-out);
  }
}

/* ==========================================================================
   8. Página de erro/404 (glow usa DM Serif + navy upstream)
   ========================================================================== */

.glow-404 {
  color: var(--fx-primary);
}

/* ==========================================================================
   9. Wordmark da marca (header/footer)
   ========================================================================== */

.fx-wordmark {
  font-family: var(--fx-font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fx-ink);
  text-decoration: none;
}

.fx-wordmark-accent {
  color: var(--fx-primary);
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--fx-primary-tint);
  background: var(--fx-primary-soft);
  color: var(--fx-primary-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* Faixa de serviços (componente services do tema default herda a paleta) */

/* Card padrão do tema (usado nos overrides) */
.fx-card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  box-shadow: var(--fx-shadow-card);
}

.fx-card-hover {
  transition: box-shadow var(--fx-dur-med) var(--fx-ease-out),
              transform var(--fx-dur-med) var(--fx-ease-out);
}

.fx-card-hover:hover {
  box-shadow: var(--fx-shadow-hover);
}

/* Estado vazio */
.fx-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--fx-ink-secondary);
}

.fx-empty h2,
.fx-empty h3 {
  color: var(--fx-ink);
  margin-bottom: 8px;
}

.fx-empty p {
  max-width: 46ch;
  margin: 0 auto 20px;
  color: var(--fx-ink-muted);
}

/* ==========================================================================
   10. Logo do canal (raposa geométrica oficial, storage/channel)
   Os attrs width=131/height=29 do upstream esticariam a imagem quadrada;
   preserva o aspect ratio e dimensiona pela altura. A raposa de linhas
   finas só ganha presença sobre fundo escuro (estética "neon sign" da
   referência) — tile escuro + wordmark tipográfico, sem inventar marca.
   ========================================================================== */

header img[src*="/storage/channel/"] {
  width: auto;
  height: 26px;
  padding: 6px;
  background: linear-gradient(140deg, #0A1E3C 0%, #0F2A52 100%);
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(10, 30, 60, 0.18);
}

header a:has(> img[src*="/storage/channel/"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

header a:has(> img[src*="/storage/channel/"])::after {
  content: "FoxFarma";
  font-family: var(--fx-font-heading);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--fx-ink);
  line-height: 1;
}

@media (max-width: 1023px) {
  header a:has(> img[src*="/storage/channel/"])::after {
    font-size: 18px;
  }

  header img[src*="/storage/channel/"] {
    height: 22px;
    padding: 4px;
    border-radius: 7px; /* respeita o max-h-[30px] do <a> no mobile */
  }
}

/* ==========================================================================
   11. Escala zinc (usada pelo tema default em blades/JS; mesma mecânica do
   remap da paleta — cobre o inventário medido em P3-A)
   ========================================================================== */

.text-zinc-400 { color: var(--fx-ink-muted); }
.text-zinc-500 { color: var(--fx-ink-muted); }
.text-zinc-600 { color: var(--fx-ink-secondary); }
.text-zinc-900 { color: var(--fx-ink); }
.border-zinc-100 { border-color: #E8EEF6; }
.border-zinc-200 { border-color: var(--fx-border); }
.border-zinc-300 { border-color: #D4DEEC; }
.bg-zinc-50 { background-color: #F8FAFD; }
.bg-zinc-100 { background-color: var(--fx-fill); }
.bg-zinc-200 { background-color: var(--fx-fill-strong); }
.bg-zinc-300 { background-color: #D8E1EE; }
.hover\:bg-zinc-100:hover { background-color: var(--fx-fill); }
.hover\:bg-zinc-50:hover { background-color: #F8FAFD; }

/* Beiges hardcoded no footer/newsletter do upstream → tokens da marca */
.bg-\[\#F1EADF\] { background-color: var(--fx-fill); }
.\!bg-\[\#F1EADF\] { background-color: var(--fx-fill) !important; }
.border-\[\#e9decc\] { border-color: var(--fx-border); }
.\!border-\[\#e9decc\] { border-color: var(--fx-border) !important; }

/* Título da newsletter: itálico serifado do upstream vira heading da marca */
footer .italic {
  font-style: normal;
}

/* 12. Logo do canal fora do header (auth, esqueci/reset senha) — mesmo tile escuro do header */
main img[src*="/storage/channel/"],
body > div img[src*="/storage/channel/"][width="131"] {
  width: auto;
  height: 40px;
  padding: 8px;
  background: linear-gradient(140deg, #0A1E3C 0%, #0F2A52 100%);
  border-radius: 11px;
  box-shadow: 0 1px 3px rgba(10, 30, 60, 0.18);
}

/* 12b. Wordmark ao lado do logo fora do header (consistência de marca) */
main a:has(> img[src*="/storage/channel/"][width="131"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

main a:has(> img[src*="/storage/channel/"][width="131"])::after {
  content: "FoxFarma";
  font-family: var(--fx-font-heading);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--fx-ink);
  line-height: 1;
}

/* 13. Checkout/conta: campo "ID do IVA" escondido (P3-C)
   Não há toggle nativo; Brasil não usa VAT e coleta mínima é regra do projeto.
   Degradação graciosa: sem :has() o campo continua visível (funcional). */
div:has(> input[name$="vat_id"]) {
  display: none;
}

/* ---------------------------------------------------------------------------
   P3-Testes: o build nativo carrega `* { font-family: Poppins, sans-serif }`,
   que aplica Poppins ELEMENTO a elemento (não via herança) — o `font-family`
   de `body` nunca chega aos filhos e a Inter nunca é baixada. Sobrescrevemos
   o mesmo seletor universal para restaurar a herança da marca (html fica de
   fora para não herdar do initial). Ícones seguem protegidos pela regra
   `[class^=icon-]` com !important do nativo; classes de utilidade de fonte
   (font-mono etc.) vencem por especificidade. Carregado por último, mesmo
   peso → vence o universal nativo.
--------------------------------------------------------------------------- */
:where(*) {
  font-family: inherit;
}

/* html fora do :where (não tem de quem herdar): fonte da marca direto. */
html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}