/*
 * ORIGEM ÚNICA dos design tokens do Medon (assets/design-tokens/tokens.css,
 * raiz do repo) — cores, tipografia, espaçamento, raios e sombras usados
 * tanto pelo site público estático (Medon.Site) quanto pelo app logado
 * (Medon.Client). EDITE SÓ AQUI.
 *
 * Este arquivo é sincronizado automaticamente para wwwroot/css/tokens.css em
 * cada projeto por um MSBuild Target ("SincronizarDesignTokens",
 * BeforeTargets="Build") — não por <Content Include Link="...">, porque o
 * servidor de dev do Kestrel/Blazor (`dotnet run`) serve wwwroot direto da
 * árvore de código-fonte, não da pasta de build output onde Link copiaria o
 * arquivo; só Link deixaria tokens.css faltando em dev (e num deploy que
 * apenas copia wwwroot para hospedagem estática, sem passar por
 * `dotnet publish`). Ambos os projetos rodam o Target a cada build, então a
 * cópia nunca fica desatualizada — mas é uma cópia física gerada, não é a
 * origem: se editar wwwroot/css/tokens.css diretamente, a próxima build
 * sobrescreve com o conteúdo daqui.
 *   - src/Medon.Site/Medon.Site.csproj
 *   - src/Medon.Client/Medon.Client.csproj
 *
 * Paleta: identidade provisória (não há material de marca aprovado ainda —
 * ver relatório final da etapa). Azul céu suave como cor principal do
 * produto inteiro (2ª revisão — troca o azul mais saturado da revisão
 * anterior). --cor-primaria-400/600 são os dois tons pedidos (#38BDF8 e
 * #0284C7); --cor-primaria-700/900 são mais escuros que qualquer um dos
 * dois porque nenhum dos dois sozinho fecha 4.5:1 (mínimo WCAG AA pra
 * texto normal) contra branco — --cor-primaria-600 mede só ~4,1:1. Todo
 * texto/botão continua usando --cor-primaria-700 (~5,9:1), nunca 600,
 * mesmo padrão já usado desde a paleta teal original. 400/600 ficam pra
 * uso decorativo (formas, degradê de destaque), não pra texto sobre eles.
 */

:root {
  /* ---------- Cor: marca ---------- */
  --cor-primaria-900: #0C4A6E;
  --cor-primaria-700: #0369A1;
  --cor-primaria-600: #0284C7;
  --cor-primaria-500: #0EA5E9;
  --cor-primaria-400: #38BDF8;
  --cor-primaria-100: #E0F2FE;
  --cor-primaria-50: #F0F9FF;

  --cor-acento-600: #e08a2c;
  --cor-acento-500: #f0a03d;

  /* ---------- Cor: feedback ---------- */
  --cor-sucesso-600: #1a8a4a;
  --cor-sucesso-100: #e3f6ea;
  /* Par de texto para o verde-claro, pelo mesmo motivo do --cor-aviso-texto logo
     abaixo: --cor-sucesso-600 sobre --cor-sucesso-100 mede 3,9:1, abaixo do mínimo de
     4,5:1 (WCAG AA, texto normal). Como ELEMENTO GRÁFICO o 600 passa (mínimo 3:1), e é
     por isso que os ícones em pastilha verde continuam usando ele. Este fecha 6,2:1
     sobre o verde-claro e 7,0:1 sobre branco. */
  --cor-sucesso-texto: #146638;
  --cor-erro-600: #c62828;
  --cor-erro-100: #fbe6e6;
  --cor-aviso-600: #b8860b;
  --cor-aviso-100: #fdf3d9;
  /* Par dedicado ao banner de acesso inativo (MainLayout) — texto mais escuro que
     --cor-aviso-600 (pensado para badge pequeno) porque aqui é um parágrafo inteiro,
     e um botão em tom terracota suave em vez do amarelo saturado do Bootstrap
     (btn-warning), que brigava com o teal da marca. */
  --cor-aviso-texto: #633806;
  --cor-aviso-botao: #f0997b;
  --cor-aviso-botao-texto: #4a1b0c;

  --cor-info-600: #0c447c;
  --cor-info-100: #e6f1fb;

  /* ---------- Cor: neutros ---------- */
  --cor-neutro-900: #16211f;
  --cor-neutro-800: #263a37;
  --cor-neutro-700: #3d5754;
  --cor-neutro-500: #6b807d;
  --cor-neutro-300: #a9bab8;
  --cor-neutro-200: #d3dedc;
  --cor-neutro-100: #eaf1f0;
  --cor-neutro-50: #f7fafa;
  --cor-branco: #ffffff;

  /* ---------- Cor: papéis semânticos ---------- */
  --cor-fundo: var(--cor-branco);
  --cor-fundo-secao: var(--cor-neutro-50);
  --cor-superficie: var(--cor-branco);
  --cor-texto: var(--cor-neutro-900);
  --cor-texto-secundario: var(--cor-neutro-700);
  --cor-borda: var(--cor-neutro-200);
  --cor-foco: var(--cor-acento-600);

  /* ---------- Tipografia ----------
   * Pilha de fontes do sistema (nenhuma webfont carregada): elimina o custo
   * de download de fonte na primeira carga, que é justamente a métrica que a
   * Home mais precisa proteger. font-display: swap não se aplica aqui porque
   * não há @font-face nenhum. */
  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-titulo: var(--fonte-base);

  --texto-xs: 0.8rem;
  --texto-sm: 0.9rem;
  --texto-base: 1rem;
  --texto-lg: 1.15rem;
  --texto-xl: 1.4rem;
  --texto-2xl: 1.85rem;
  --texto-3xl: 2.5rem;
  --texto-4xl: 3.2rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-negrito: 700;
  --peso-extra-negrito: 800;

  --altura-linha-base: 1.55;
  --altura-linha-titulo: 1.15;

  /* ---------- Espaçamento (base 4px) ---------- */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-8: 3rem;
  --espaco-10: 4rem;
  --espaco-12: 6rem;

  /* ---------- Raios ---------- */
  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 20px;
  --raio-completo: 999px;

  /* ---------- Sombras ---------- */
  --sombra-sm: 0 1px 3px rgba(22, 33, 31, 0.08);
  --sombra-md: 0 4px 16px rgba(22, 33, 31, 0.10);
  --sombra-lg: 0 12px 32px rgba(22, 33, 31, 0.14);

  /* ---------- Transição ---------- */
  --transicao-rapida: 150ms ease;
  --transicao-normal: 250ms ease;

  /* ---------- Breakpoints (documentação — CSS custom properties não podem
   * ser usadas dentro de @media, então os mesmos valores devem ser
   * escritos literalmente nas media queries; mantidos aqui como
   * referência única para não haver dois números diferentes por engano) ---------- */
  --breakpoint-sm: 640px;  /* usar "@media (min-width: 640px)" */
  --breakpoint-md: 768px;  /* usar "@media (min-width: 768px)" */
  --breakpoint-lg: 1024px; /* usar "@media (min-width: 1024px)" */
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #0f1715;
    --cor-fundo-secao: #142120;
    --cor-superficie: #182524;
    --cor-texto: #eaf1f0;
    --cor-texto-secundario: var(--cor-neutro-300);
    --cor-borda: #2a3d3a;
  }
}