/* Tokens do design system. Fonte da verdade para componentes e temas de gráfico.
   Prefixo --k-. Cores em #rrggbb, sem branco nem preto puros.
   O teste contraste.test.ts mede os pares de cor nos dois temas. */

/* Tema dia, o padrão. */
:root {
  color-scheme: light;

  /* Fundos: página, painel, faixa alternada, corte do instante (abertura) e
     faixa de contexto (admissão, transferência, alta). */
  --k-fundo: #F3F5F4;
  --k-superficie: #FBFCFB;
  --k-faixa: #EDF1EF;
  --k-abertura: #DDE7E6;
  --k-contexto: #E6EBE9;

  /* Tinta: texto principal (7:1), texto secundário (4,5:1) e linha decorativa. */
  --k-texto: #0E2127;
  --k-texto-secundario: #52636A;
  --k-linha: #C9D2CF;

  /* Barra superior do produto: tinta no dia, mais escura que o fundo à noite. */
  --k-barra: #0E2127;
  --k-barra-texto: #FBFCFB;

  /* Comandos: borda e foco, 3:1 sobre fundo e superfície. */
  --k-contorno: #6B7C83;
  --k-foco: #0E2127;

  /* Alarmes: cor forte (também texto), fundo suave e texto sobre a cor forte.
     Vermelho, âmbar e ciano seguem a convenção da IEC 60601-1-8, como
     referência de projeto. Alarme nunca só pela cor: marca, palavra e forma. */
  --k-alarme-alta: #B42318;
  --k-alarme-alta-fundo: #FDEBE9;
  --k-alarme-alta-sobre: #FBFCFB;
  --k-alarme-media: #7A4300;
  --k-alarme-media-fundo: #FFEFCF;
  --k-alarme-media-sobre: #FBFCFB;
  --k-alarme-baixa: #0B6E82;
  --k-alarme-baixa-fundo: #E3F3F7;
  --k-alarme-baixa-sobre: #FBFCFB;

  /* Tipografia. Tamanhos em rem: o nome é o valor em px na raiz de 16 px. */
  --k-fonte: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --k-tamanho-12: 0.75rem;
  --k-tamanho-14: 0.875rem;
  --k-tamanho-16: 1rem;
  --k-tamanho-18: 1.125rem;
  --k-tamanho-21: 1.3125rem;
  --k-tamanho-24: 1.5rem;
  --k-tamanho-36: 2.25rem;
  --k-tamanho-48: 3rem;
  --k-peso-normal: 400;
  --k-peso-medio: 500;
  --k-peso-forte: 700;
  --k-altura-linha: 1.45;
  --k-medida-prosa: 70ch;

  /* Espaço em múltiplos de 4 px. O número conta passos de 4 px. */
  --k-espaco-1: 0.25rem;
  --k-espaco-2: 0.5rem;
  --k-espaco-3: 0.75rem;
  --k-espaco-4: 1rem;
  --k-espaco-6: 1.5rem;
  --k-espaco-8: 2rem;
  --k-espaco-12: 3rem;
  --k-espaco-16: 4rem;

  /* Raios. Faixas não têm raio. */
  --k-raio-comando: 4px;
  --k-raio-painel: 8px;

  /* Movimento. */
  --k-duracao-curta: 120ms;
  --k-duracao-longa: 240ms;

  /* Camadas: todo z-index sai daqui. */
  --k-camada-conteudo: 0;
  --k-camada-cabecalho: 10;
  --k-camada-sobreposicao: 20;

  /* Alvo mínimo de clique e toque. O modo muda o valor. */
  --k-alvo-min: 24px;
}

/* Tema noite: a tinta vira fundo. Vale com data-tema="noite". */
[data-tema="noite"] {
  color-scheme: dark;
  --k-fundo: #0A161B;
  --k-superficie: #0F2128;
  --k-faixa: #132A31;
  --k-abertura: #1A343C;
  --k-contexto: #162E36;
  --k-texto: #E6EDEB;
  --k-texto-secundario: #8FA4AA;
  --k-linha: #1F343B;
  --k-barra: #071115;
  --k-barra-texto: #E6EDEB;
  --k-contorno: #6B7C83;
  --k-foco: #E6EDEB;
  --k-alarme-alta: #FF7A6E;
  --k-alarme-alta-fundo: #3A1512;
  --k-alarme-alta-sobre: #0A161B;
  --k-alarme-media: #F5C451;
  --k-alarme-media-fundo: #3A2A06;
  --k-alarme-media-sobre: #0A161B;
  --k-alarme-baixa: #5CC8DE;
  --k-alarme-baixa-fundo: #0D2E36;
  --k-alarme-baixa-sobre: #0A161B;
}

/* Tema noite pelo sistema, salvo escolha explícita de data-tema="dia".
   Cópia do bloco acima; o teste confere que são iguais. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) {
    color-scheme: dark;
    --k-fundo: #0A161B;
    --k-superficie: #0F2128;
    --k-faixa: #132A31;
    --k-abertura: #1A343C;
    --k-contexto: #162E36;
    --k-texto: #E6EDEB;
    --k-texto-secundario: #8FA4AA;
    --k-linha: #1F343B;
    --k-barra: #071115;
    --k-barra-texto: #E6EDEB;
    --k-contorno: #6B7C83;
    --k-foco: #E6EDEB;
    --k-alarme-alta: #FF7A6E;
    --k-alarme-alta-fundo: #3A1512;
    --k-alarme-alta-sobre: #0A161B;
    --k-alarme-media: #F5C451;
    --k-alarme-media-fundo: #3A2A06;
    --k-alarme-media-sobre: #0A161B;
    --k-alarme-baixa: #5CC8DE;
    --k-alarme-baixa-fundo: #0D2E36;
    --k-alarme-baixa-sobre: #0A161B;
  }
}

/* Sem movimento quando o sistema pede. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --k-duracao-curta: 0ms;
    --k-duracao-longa: 0ms;
  }
}

/* Modos de tela. A raiz escala todo o rem; o alvo mínimo fica em px. */
html[data-modo="estacao"] {
  font-size: 100%;
  --k-alvo-min: 24px;
}

html[data-modo="leito"] {
  font-size: 112.5%;
  --k-alvo-min: 44px;
}

html[data-modo="parede"] {
  font-size: 150%;
  --k-alvo-min: 36px;
}