/* ============================================================================
   FIBER · Portal de Pedidos B2B — Design System
   Tokens de marca, reset e tipografia base.
   Paleta: vermelho Fiber #d71f3f + preto. Estética: app premium, mobile-first.
   Estes tokens são a única fonte de verdade visual — mudou aqui, muda no portal
   inteiro. Pensado para portar facilmente para Tailwind/CSS-in-JS depois.
   ========================================================================== */

:root {
  /* Marca */
  --fiber-red:        #d71f3f;
  --fiber-red-600:    #c11a36;
  --fiber-red-700:    #a5152d;
  --fiber-red-soft:   #fdeaee;
  --fiber-red-glow:   rgba(215, 31, 63, 0.28);

  /* Tinta / neutros */
  --ink:              #17181a;   /* quase preto — títulos */
  --ink-2:            #3a3d42;   /* texto forte */
  --ink-soft:         #6b7078;   /* texto secundário */
  --muted:            #969ba3;   /* legendas / placeholders */
  --line:             #ecedf0;   /* divisórias */
  --line-2:           #e0e2e6;
  --bg:               #f5f6f8;   /* fundo do app */
  --bg-2:             #eef0f3;
  --card:             #ffffff;
  --card-tint:        #fbfbfc;

  /* Estados */
  --ok:               #1f9d57;
  --ok-soft:          #e6f5ec;
  --warn:             #d98a00;
  --warn-soft:        #fdf1dc;
  --info:             #2f6bd4;
  --info-soft:        #e8f0fc;

  /* Tipografia */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Raios */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Sombras (leves, difusas — sensação de app) */
  --sh-xs: 0 1px 2px rgba(20, 22, 26, 0.05);
  --sh-sm: 0 2px 8px rgba(20, 22, 26, 0.06);
  --sh-md: 0 8px 24px rgba(20, 22, 26, 0.08);
  --sh-lg: 0 18px 48px rgba(20, 22, 26, 0.12);
  --sh-red: 0 10px 26px rgba(215, 31, 63, 0.30);

  /* Espaçamento */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* Layout */
  --app-max: 1120px;
  --header-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.28s;
}

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--fiber-red-glow); outline-offset: 2px; border-radius: 6px; }

/* ---- Tipografia utilitária ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
.h-display { font-family: var(--font-display); font-weight: 800; }
.t-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fiber-red); }
.t-muted { color: var(--ink-soft); }
.t-sm { font-size: 13px; }
.t-xs { font-size: 12px; }
.t-price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

/* ---- Helpers ---- */
.container { width: 100%; max-width: var(--app-max); margin-inline: auto; padding-inline: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-select { user-select: none; -webkit-user-select: none; }

/* Animações de entrada */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.animate-in { animation: fadeUp var(--dur) var(--ease) both; }

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