/*
  StockFlow Design System (v1.0)

  Objetivo
  - Fornecer um sistema de design consistente, acessível e performático.
  - Estabelecer tokens (cores, tipografia, spacing), utilitários e componentes.
  - Garantir responsividade, estados interativos e manutenibilidade.

  Convenções
  - Nomenclatura semântica: .btn, .card, .navbar, .input, .container, .grid...
  - Utilitários: .p-*, .m-*, .flex, .grid, .hidden, .sr-only, .text-*, .bg-*
  - Compatibilidade: Variáveis legado mapeadas para novas tokens (ex.: --primary-color).

  Acessibilidade
  - Contraste AA para texto principal.
  - Estados :focus-visible com focus-ring.
  - Suporte a prefers-reduced-motion.
*/

/* =====================
   Design Tokens (CSS Variables)
   ===================== */
:root {
  /* Paleta - Marca (Laranja) */
  --brand-50: #FFF2E9;
  --brand-100: #FFE4D2;
  --brand-200: #FFD0B2;
  --brand-300: #FFB48A;
  --brand-400: #FF9F66;
  --brand-500: #FF8C42; /* Primária */
  --brand-600: #E67E22; /* Hover/active */
  --brand-700: #C7661A;
  --brand-800: #A85316;
  --brand-900: #8A4412;

  /* Neutros (Superfície e Texto) */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1F2937;
  --gray-900: #0F172A;

  /* Superfícies */
  --surface-0: #FFFFFF;
  --surface-100: #FCFCFD;
  --surface-200: #F6F7F9;
  --surface-300: #EDF1F7;

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  --font-heading: 'Poppins', var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Tamanho de texto (escala responsiva) */
  --fs-100: clamp(0.80rem, 0.74rem + 0.18vw, 0.90rem);
  --fs-200: clamp(0.90rem, 0.84rem + 0.20vw, 1.00rem);
  --fs-300: clamp(1.00rem, 0.95rem + 0.22vw, 1.10rem);
  --fs-400: clamp(1.10rem, 1.02rem + 0.24vw, 1.20rem);
  --fs-500: clamp(1.25rem, 1.18rem + 0.30vw, 1.40rem);
  --fs-600: clamp(1.50rem, 1.42rem + 0.36vw, 1.75rem);
  --fs-700: clamp(1.75rem, 1.65rem + 0.44vw, 2.10rem);
  --fs-800: clamp(2.10rem, 1.95rem + 0.54vw, 2.60rem);
  --fs-900: clamp(2.60rem, 2.40rem + 0.68vw, 3.25rem);

  /* Espaçamento (escala) */
  --space-0: 0px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Bordas e sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);

  /* Transições */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Mapas de compatibilidade (variáveis legado) */
  --primary-color: var(--brand-500);
  --primary-color-light: var(--brand-400);
  --text-light: #FFFFFF;
  --text-dark: var(--gray-700);
  --bg-light: var(--surface-0);
  --bg-dark-gray: #2D3748;
  --card-bg: var(--surface-100);
  --border-color: var(--gray-200);
  --title-font: var(--font-heading);
  --primary-orange: var(--brand-500);
}

/* =====================
   Base / Reset leve
   ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--surface-100);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--gray-900); margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-4); color: var(--gray-700); }
a { color: var(--brand-600); text-decoration: none; transition: color var(--duration-normal) var(--ease-in-out); }
a:hover { color: var(--brand-700); }

img, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }

/* Foco acessível */
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* =====================
   Utilitários
   ===================== */
.container { width: 100%; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 1024px) { .container { max-width: 960px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }
.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }

.text-muted { color: var(--gray-600); }
.text-primary { color: var(--brand-600); }
.bg-surface { background: var(--surface-0); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* =====================
   Componentes: Botões
   ===================== */
.btn {
  --btn-bg: var(--gray-100);
  --btn-color: var(--gray-800);
  --btn-border: var(--gray-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-weight: 600;
  line-height: 1;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm { padding: 0.5rem 0.85rem; font-size: var(--fs-200); }
.btn-lg { padding: 0.8rem 1.25rem; font-size: var(--fs-400); }

.btn-primary { --btn-bg: var(--brand-500); --btn-color: #fff; --btn-border: var(--brand-500); }
.btn-primary:hover { --btn-bg: var(--brand-600); }
.btn-outline { --btn-bg: transparent; --btn-color: var(--brand-600); --btn-border: var(--brand-600); }
.btn-outline:hover { --btn-bg: var(--brand-50); }
.btn-ghost { --btn-bg: transparent; --btn-color: var(--gray-800); --btn-border: transparent; }
.btn-ghost:hover { --btn-bg: var(--gray-100); }

/* =====================
   Componentes: Formulários
   ===================== */
.form-field { display: grid; gap: var(--space-2); }
.label { font-weight: 600; color: var(--gray-700); }
.input, .select, .textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--gray-800);
  transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}
.input::placeholder, .textarea::placeholder { color: var(--gray-500); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.25); outline: none; }

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

/* =====================
   Componentes: Cards
   ===================== */
.card {
  background: var(--surface-0);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  content-visibility: auto;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--gray-200); background: var(--surface-100); }
.card-body { padding: var(--space-6); }
.card-footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--gray-200); background: var(--surface-100); }

/* =====================
   Componentes: Navbar (estrutura básica)
   ===================== */
.navbar { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--gray-200); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); }
.navbar .nav-link { color: var(--gray-700); font-weight: 600; padding: 0.25rem 0; position: relative; }
.navbar .nav-link::before { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--brand-500); transition: width var(--duration-normal) var(--ease-in-out); }
.navbar .nav-link:hover::before { width: 100%; }

/* =====================
   Componentes: Badges & Alerts
   ===================== */
.badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: var(--fs-200); font-weight: 600; }
.badge-primary { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }

.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--gray-200); background: var(--surface-100); }
.alert-title { font-weight: 700; color: var(--gray-900); }
.alert-desc { color: var(--gray-700); }
.alert-success { border-color: #22C55E; background: #F0FDF4; }
.alert-warning { border-color: #F59E0B; background: #FFFBEB; }
.alert-danger { border-color: #EF4444; background: #FEF2F2; }

/* =====================
   Animações e Transições
   ===================== */
.fade-in { animation: fadeIn var(--duration-slow) var(--ease-out) both; }
.slide-up { animation: slideUp var(--duration-slow) var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Reduz movimento quando necessário */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================
   Helpers de performance
   ===================== */
.will-transform { will-change: transform; }
.will-opacity { will-change: opacity; }

/* =====================
   Exemplos de mapeamento de classes existentes
   ===================== */
.btn-nav { /* compatível com classes já usadas no header */
  padding: 0.6rem 1.2rem;
  font-size: var(--fs-200);
  background-color: var(--primary-orange);
  color: var(--text-light);
  border: 1px solid var(--primary-orange);
  box-shadow: 0 4px 10px rgba(255, 140, 66, 0.2);
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-nav:hover { background-color: var(--brand-600); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 140, 66, 0.4); }

/* =====================
   Documentação rápida (comentários)
   ===================== */
/*
  Uso de botões:
  - Básico: <button class="btn">Texto</button>
  - Primário: <button class="btn btn-primary">Comprar</button>
  - Outline: <button class="btn btn-outline">Detalhes</button>
  - Ghost: <button class="btn btn-ghost">Saiba mais</button>
  - Tamanhos: .btn-sm, .btn-lg

  Inputs:
  - <div class="form-field"><label class="label">Email</label><input class="input" placeholder="email@dominio.com" /></div>

  Cards:
  - <article class="card"><header class="card-header">Título</header><div class="card-body">Conteúdo</div><footer class="card-footer">Ações</footer></article>

  Layout responsivo:
  - <section class="container grid grid-3"> ... </section>
*/