/* =============================================================
   DESIGN TOKENS — VM VENDAS E COMPRAS
   ============================================================= */

:root {
  /* Cores da marca */
  --cor-principal: #0ea5e9;
  --cor-principal-escura: #0284c7;
  --cor-principal-clara: #7dd3fc;
  --cor-secundaria: #0f172a;
  --cor-destaque: #f59e0b;
  --cor-destaque-escura: #d97706;

  /* Cores de fundo e texto */
  --cor-fundo: #ffffff;
  --cor-fundo-suave: #f8fafc;
  --cor-texto: #0f172a;
  --cor-texto-suave: #64748b;
  --cor-borda: #e2e8f0;
  --cor-borda-escura: #cbd5e1;

  /* Cores semânticas */
  --cor-sucesso: #16a34a;
  --cor-sucesso-escura: #15803d;
  --cor-alerta: #f59e0b;
  --cor-erro: #dc2626;
  --cor-erro-escura: #b91c1c;
  --cor-info: #0ea5e9;

  /* Tipografia */
  --fonte-principal: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-principal);
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Monaco,
    "Cascadia Code", Consolas, monospace;

  --texto-xs: 12px;
  --texto-sm: 14px;
  --texto-base: 16px;
  --texto-lg: 18px;
  --texto-xl: 20px;
  --texto-2xl: 24px;
  --texto-3xl: 30px;
  --texto-4xl: 36px;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  --linha-apertada: 1.25;
  --linha-normal: 1.5;
  --linha-solta: 1.75;

  /* Espaçamentos */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;
  --esp-20: 80px;
  --esp-24: 96px;

  /* Raios */
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --raio-xl: 16px;
  --raio-full: 9999px;

  --raio-botao: var(--raio-md);
  --raio-card: var(--raio-lg);
  --raio-input: var(--raio-md);

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sombra-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sombra-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
  --sombra-xl: 0 20px 40px rgba(15, 23, 42, 0.12);

  /* Transições */
  --transicao-rapida: 120ms ease;
  --transicao-normal: 200ms ease;
  --transicao-lenta: 320ms ease;

  /* Layout */
  --largura-maxima: 1440px;
  --largura-maxima-xl: 1440px;
  --largura-conteudo: 1200px;
  --altura-header: 72px;
  --altura-header-mob: 60px;

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Botões — padrões */
  --botao-altura: 44px;
  --botao-altura-sm: 36px;
  --botao-altura-lg: 52px;
  --botao-pad-x: 18px;
  --botao-pad-x-sm: 12px;
  --botao-pad-x-lg: 24px;
  --botao-fonte: 15px;
  --botao-fonte-sm: 13px;
  --botao-fonte-lg: 16px;

  /* Foco */
  --anel-foco: 0 0 0 3px rgba(14, 165, 233, 0.35);
}


/* =============================================================
   MODO ESCURO
   ============================================================= */

html[data-tema="escuro"] {
  --cor-fundo: #0f172a;
  --cor-fundo-suave: #1e293b;
  --cor-texto: #f8fafc;
  --cor-texto-suave: #cbd5e1;
  --cor-borda: #334155;
  --cor-borda-escura: #475569;
  --cor-secundaria: #f8fafc;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.40);
  --sombra-xl: 0 20px 40px rgba(0, 0, 0, 0.45);
}

html[data-tema="escuro"] body {
  background-color: #0f172a;
  color: #f8fafc;
}

/* Força texto claro nos elementos principais */
html[data-tema="escuro"] h1,
html[data-tema="escuro"] h2,
html[data-tema="escuro"] h3,
html[data-tema="escuro"] h4,
html[data-tema="escuro"] h5,
html[data-tema="escuro"] h6,
html[data-tema="escuro"] p,
html[data-tema="escuro"] span,
html[data-tema="escuro"] label,
html[data-tema="escuro"] li,
html[data-tema="escuro"] td,
html[data-tema="escuro"] th,
html[data-tema="escuro"] strong,
html[data-tema="escuro"] small {
  color: var(--cor-texto);
}

html[data-tema="escuro"] .texto-suave,
html[data-tema="escuro"] .texto-secundario,
html[data-tema="escuro"] .subtitulo,
html[data-tema="escuro"] .descricao,
html[data-tema="escuro"] small {
  color: var(--cor-texto-suave);
}

html[data-tema="escuro"] a {
  color: #7dd3fc;
}

html[data-tema="escuro"] a:hover {
  color: #bae6fd;
}

/* Cards e containers */
html[data-tema="escuro"] .cabecalho,
html[data-tema="escuro"] .cartao,
html[data-tema="escuro"] .produto-card,
html[data-tema="escuro"] .resumo,
html[data-tema="escuro"] .filtros,
html[data-tema="escuro"] .bloco,
html[data-tema="escuro"] .tabela,
html[data-tema="escuro"] .carrinho__item,
html[data-tema="escuro"] .produto__especificacoes,
html[data-tema="escuro"] .checkout-secao,
html[data-tema="escuro"] .checkout-resumo,
html[data-tema="escuro"] .pedido-card,
html[data-tema="escuro"] .proposta-card,
html[data-tema="escuro"] .perfil-card,
html[data-tema="escuro"] .proposta-detalhe,
html[data-tema="escuro"] .chat-wrap,
html[data-tema="escuro"] .chat-header,
html[data-tema="escuro"] .chat-input,
html[data-tema="escuro"] .notif-card,
html[data-tema="escuro"] .card,
html[data-tema="escuro"] .modal,
html[data-tema="escuro"] .modal-content,
html[data-tema="escuro"] .secao {
  background-color: #1e293b;
  border-color: #334155;
}

/* Inputs */
html[data-tema="escuro"] input,
html[data-tema="escuro"] textarea,
html[data-tema="escuro"] select {
  background-color: #0f172a;
  color: #f8fafc;
  border-color: #475569;
}

html[data-tema="escuro"] input::placeholder,
html[data-tema="escuro"] textarea::placeholder {
  color: #94a3b8;
}

html[data-tema="escuro"] option {
  background-color: #0f172a;
  color: #f8fafc;
}

/* Tabelas */
html[data-tema="escuro"] table {
  color: #f8fafc;
}

html[data-tema="escuro"] th {
  background-color: #0f172a;
  color: #f8fafc;
  border-color: #334155;
}

html[data-tema="escuro"] td {
  color: #f1f5f9;
  border-color: #334155;
}

/* Cabeçalho */
html[data-tema="escuro"] .cabecalho {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-tema="escuro"] .cabecalho__busca {
  background-color: #0f172a;
  border-color: #475569;
}

html[data-tema="escuro"] .cabecalho__busca input {
  color: #f8fafc;
}

html[data-tema="escuro"] .cabecalho__acao {
  color: #f8fafc;
}

html[data-tema="escuro"] .cabecalho__acao:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Navegação inferior */
html[data-tema="escuro"] .nav-inferior {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-tema="escuro"] .nav-inferior__item {
  color: #cbd5e1;
}

/* Rodapé */
html[data-tema="escuro"] .rodape {
  background-color: #020617;
  color: #f8fafc;
}

/* Modais */
html[data-tema="escuro"] .modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

/* Botões com fundo próprio mantêm texto branco */
html[data-tema="escuro"] .btn--principal,
html[data-tema="escuro"] .btn--secundario,
html[data-tema="escuro"] .btn--destaque,
html[data-tema="escuro"] .btn--sucesso,
html[data-tema="escuro"] .btn--erro,
html[data-tema="escuro"] .btn--loja:hover,
html[data-tema="escuro"] .cabecalho__busca-btn,
html[data-tema="escuro"] .btn-whatsapp,
html[data-tema="escuro"] .carrossel__botao {
  color: #fff;
}

/* Estado vazio */
html[data-tema="escuro"] .estado-vazio,
html[data-tema="escuro"] .vazio {
  background-color: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}

/* Skeleton */
html[data-tema="escuro"] .skeleton {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
}


/* =============================================================
   MODO MOBILE FORÇADO (via botão)
   ============================================================= */

html[data-modo="mobile"] body {
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,0,0,.1);
  background: #f1f5f9;
}

html[data-modo="mobile"] .cabecalho,
html[data-modo="mobile"] .nav-categorias,
html[data-modo="mobile"] .nav-inferior {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

html[data-modo="desktop"] body {
  min-width: 1280px;
}


/* =============================================================
   TELAS GRANDES
   ============================================================= */

@media (min-width: 1600px) {
  :root {
    --largura-maxima: 1440px;
    --esp-16: 72px;
  }
}

@media (min-width: 1920px) {
  :root {
    --largura-maxima: 1440px;
    --esp-16: 80px;
  }
}