/* =====================================================================
   Design Dacon — tokens (variáveis CSS), tema claro e escuro.
   Funciona em qualquer projeto web, com ou sem framework.

   Uso:
     <link rel="stylesheet" href="tokens.css">
     <html data-tema="claro">   ou   <html data-tema="escuro">

   Valores extraídos do Emissor NFS-e (frontend/src/index.css) em 13/11/2026.
   ===================================================================== */

@font-face { font-family: "Manrope"; src: url("../dacon/fontes/Manrope-400.b14c3069e3f7.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../dacon/fontes/Manrope-500.9efdb4161ece.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../dacon/fontes/Manrope-600.9c61a253b039.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../dacon/fontes/Manrope-700.ad56d0ba69e7.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../dacon/fontes/Manrope-800.b7a637ee24e9.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* ---------- Tema claro (padrão) ---------- */
:root {
  color-scheme: light;

  /* Marca */
  --cor-primaria: #1b5e20;            /* verde — ação principal, estado ativo, valores positivos */
  --cor-primaria-texto: #ffffff;
  --cor-secundaria: #5d4037;          /* marrom — ação alternativa ("Novo orçamento"), títulos de grupo */
  --cor-secundaria-texto: #f7fbf1;
  --cor-destaque: #802f48;            /* vinho — impostos (ISS) em gráficos */
  --cor-destaque-texto: #ffffff;
  --cor-marinho: #1f2d55;             /* azul-marinho do logo — menu ativo, ícone "Notas Emitidas" */

  /* Superfícies e texto */
  --cor-fundo: #f4f6f9;               /* fundo da aplicação */
  --cor-cartao: #ffffff;              /* cartões, modais, barra de topo */
  --cor-texto: #1f2937;

  /* Situação */
  --cor-sucesso: #1b5e20;
  --cor-aviso: #b7791f;
  --cor-perigo: #9b2c2c;
  --cor-neutro: #6b7280;

  /* Escala de cinza (bordas, textos secundários, hovers) */
  --cinza-50: #f9fafb;
  --cinza-100: #f3f4f6;
  --cinza-200: #e5e7eb;
  --cinza-300: #d1d5db;
  --cinza-400: #9ca3af;
  --cinza-500: #6b7280;
  --cinza-600: #4b5563;
  --cinza-700: #374151;
  --cinza-800: #1f2937;
  --cinza-900: #111827;

  /* Menu lateral */
  --menu-fundo: #ffffff;
  --menu-borda: #e3e7ee;
  --menu-texto: #374151;
  --menu-texto-suave: #6b7280;
  --menu-hover: #f1f4f9;
  --menu-ativo-fundo: #e6ecf7;
  --menu-ativo-texto: #1f2d55;
  --menu-destaque: #1f2d55;           /* barrinha à esquerda do item ativo */

  /* Gráficos */
  --grafico-serie-1: #1b5e20;         /* Faturado */
  --grafico-serie-2: #802f48;         /* ISS */
  --grafico-grade: #e5e7eb;
  --grafico-eixo: #6b7280;

  /* Forma e tipografia */
  --fonte: "Manrope", system-ui, -apple-system, sans-serif;
  --raio: 4px;                        /* botões, campos, cartões, tabelas */
  --raio-medio: 6px;                  /* itens do menu (subitens) */
  --raio-grande: 12px;                /* atalhos da Home, cartão do logo */
  --raio-pilula: 9999px;              /* botão Home */
  --sombra-leve: 0 1px 2px rgb(0 0 0 / 0.05);
  --sombra-media: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sombra-forte: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ---------- Tema escuro ----------
   A escala de cinza é INVERTIDA: o que era claro vira escuro e vice-versa.
   Assim, componentes escritos com --cinza-* funcionam nos dois temas sem
   nenhuma regra extra. */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --cor-primaria: #2e7d32;
  --cor-fundo: #16181c;
  --cor-cartao: #1f2227;
  --cor-texto: #e5e7eb;

  --cor-sucesso: #4caf50;
  --cor-aviso: #d69e2e;
  --cor-perigo: #e05252;

  --cinza-50: #23262b;
  --cinza-100: #2a2e34;
  --cinza-200: #343840;
  --cinza-300: #474c55;
  --cinza-400: #858b96;
  --cinza-500: #9aa0aa;
  --cinza-600: #b4b9c2;
  --cinza-700: #c9cdd4;
  --cinza-800: #e2e5e9;
  --cinza-900: #f1f3f5;

  --menu-fundo: #101215;
  --menu-borda: #262a30;
  --menu-texto: #c9cdd4;
  --menu-texto-suave: #858b96;
  --menu-hover: #1c1f24;
  --menu-ativo-fundo: #2a2e34;
  --menu-ativo-texto: #ffffff;
  --menu-destaque: #c0c5cc;           /* prata do logo */

  --grafico-serie-1: #4caf50;
  --grafico-serie-2: #c2577a;
  --grafico-grade: #343840;
  --grafico-eixo: #9aa0aa;
}