/* =============================================================================
   base.css — tokens, fontes e primitivos compartilhados (landing + checkout)
   Paleta natural terrosa (marrom + creme) com accent verde-oliva.
   Tema somente claro. Fontes vendorizadas (offline), fallback system-ui.
   ============================================================================= */

/* ---------- Fontes locais (assets/fonts) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-600.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-800.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --background:#ffffff;
  --foreground:#13110d;
  --card:#ffffff;
  --primary:#4b2915;            /* marrom escuro */
  --primary-foreground:#fbf8f1; /* creme */
  --secondary:#fbf0e4;          /* creme claro */
  --secondary-foreground:#3c2111;
  --muted:#f5f1ea;
  --muted-foreground:#625245;
  --accent:#949523;             /* verde-oliva/lima */
  --accent-foreground:#ffffff;
  --success:#499537;
  --green-pix:#007b01;          /* verde escuro do texto PIX / "em estoque" */
  --border:#e3e6ea;
  --input:#e3e6ea;
  --radius:0.75rem;
  --shadow-soft:0 8px 30px -8px rgba(74,41,21,0.20);

  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:28rem; /* max-w-md ~ 448px, layout mobile-first coluna única */
}

/* ---------- Reset leve ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--foreground);
  background:var(--background);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.2;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* container central mobile-first */
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%;}

/* ---------- Primitivos compartilhados ---------- */
/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;border-radius:9999px;font-family:var(--font-display);
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  line-height:1;transition:transform .08s ease,filter .15s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-accent{background:var(--accent);color:var(--accent-foreground);box-shadow:var(--shadow-soft);}
.btn-accent:hover{filter:brightness(1.05);}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);}
.btn-outline:hover{background:var(--secondary);}
.btn-lg{height:3.5rem;padding-inline:1.5rem;font-size:.95rem;width:100%;}
.btn-md{height:3rem;padding-inline:1.25rem;font-size:.9rem;width:100%;}

/* Pílulas / badges */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;
  border-radius:9999px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:.7rem;line-height:1;padding:.4rem .7rem;
}
.pill-accent{background:var(--accent);color:var(--accent-foreground);}
.pill-success{background:rgba(0,123,1,.12);color:var(--green-pix);}

/* Ícones lucide inline */
.ic{width:1.25rem;height:1.25rem;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.ic-sm{width:1rem;height:1rem;}