/* SISTEMA DE DESENHO MINIMALISTA (r169, 11/10/2026): os TOKENS, em tres camadas.
   Ponto de partida: o desenho da Mission minimalista que o CEO fez para o Carvalho (branco, texto #111, um azul so, cartao
   #F4F6FB, linha #EDEDED, raios 12 e 14, numeros grandes), medido pela regua da Apple (clareza, deferencia ao conteudo,
   profundidade sutil, espaco generoso). Feito para o painel pessoal (intel.carvalho.si) e para a Mission copiarem igual.

   COMO LER:
   1. PRIMITIVO (--p-*): o valor cru, com o nome do que ele E (uma cor, um tamanho). Ninguem fora deste arquivo usa.
   2. SEMANTICO (--cor-*, --tipo-*, --esp-*, --raio-*...): o PAPEL do valor (texto, linha, destaque). E aqui que o tema
      escuro troca: as telas usam so esta camada, entao o tema escuro sai de graca.
   3. COMPONENTE (--cartao-*, --botao-*, --campo-*...): o que cada componente de componentes.css le. Mudar um componente
      sem mexer nos outros e mudar so a linha dele aqui.

   CONTRASTE MEDIDO (WCAG, 11/10/2026): texto #111 sobre branco 18,9:1; secundario #555 7,5:1 (6,9:1 sobre o cartao);
   terciario #6B6B6B 5,3:1 (4,9:1 sobre o cartao); azul #0A5BD8 6,0:1 (e branco sobre o azul tambem 6,0:1). No escuro:
   texto #F5F5F7 18,1:1; secundario #AEAEB2 8,9:1; terciario #8E8E93 6,0:1; azul de texto #6AA5FF 7,9:1. Nenhum texto
   abaixo de 4,5:1. */

:root {
  /* ===== 1. PRIMITIVO ===== */

  /* neutros claros */
  --p-branco: #ffffff;
  --p-nevoa: #f4f6fb; /* cinza azulado bem claro: o cartao */
  --p-nevoa-funda: #e9edf6; /* o cartao apertado */
  --p-cinza-100: #ededed; /* linha fina */
  --p-cinza-200: #dcdcdc; /* borda de campo em repouso */
  --p-cinza-400: #8a8a8a; /* icone de apoio (seta do cartao) */
  --p-cinza-600: #6b6b6b; /* texto terciario */
  --p-cinza-700: #555555; /* texto secundario */
  --p-cinza-950: #111111; /* texto principal (nunca o preto puro) */

  /* neutros escuros */
  --p-noite: #0b0b0c; /* fundo escuro (nunca o preto puro) */
  --p-noite-cartao: #1a1a1d;
  --p-noite-cartao-fundo: #242428;
  --p-noite-linha: #2a2a2e;
  --p-noite-borda: #3a3a3f;
  --p-noite-icone: #7c7c84;
  --p-noite-texto-3: #8e8e93;
  --p-noite-texto-2: #aeaeb2;
  --p-noite-texto: #f5f5f7;

  /* a UNICA cor de destaque, e as cores de estado (so para estado de verdade: no ar, fora do ar) */
  --p-azul: #0a5bd8;
  --p-azul-fundo: #0848a8; /* apertado */
  --p-azul-claro: #6aa5ff; /* texto azul no tema escuro */
  --p-verde: #1f7a4d;
  --p-verde-claro: #5bd38a;
  --p-vermelho: #b42318;
  --p-vermelho-claro: #ff7a6e;
  --p-vermelho-nevoa: #fdeceb;
  --p-vermelho-noite: #3a1715;
  --p-chave-clara: #e9e9eb; /* trilho da chave desligada */
  --p-chave-escura: #39393d;

  /* tipo: Satoshi (fontes/satoshi.css), com a fonte do sistema de reserva enquanto ela carrega */
  --p-fonte: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-tam-11: 0.6875rem;
  --p-tam-13: 0.8125rem;
  --p-tam-15: 0.9375rem;
  --p-tam-16: 1rem;
  --p-tam-17: 1.0625rem;
  --p-tam-20: 1.25rem;
  --p-tam-22: 1.375rem;
  --p-tam-28: 1.75rem;
  --p-tam-34: 2.125rem;
  --p-tam-40: 2.5rem;

  /* espaco: grade de 4 */
  --p-2: 0.125rem;
  --p-4: 0.25rem;
  --p-6: 0.375rem;
  --p-8: 0.5rem;
  --p-10: 0.625rem;
  --p-12: 0.75rem;
  --p-14: 0.875rem;
  --p-16: 1rem;
  --p-20: 1.25rem;
  --p-24: 1.5rem;
  --p-28: 1.75rem;
  --p-32: 2rem;
  --p-40: 2.5rem;
  --p-48: 3rem;
  --p-56: 3.5rem;
  --p-64: 4rem;

  /* ===== 2. SEMANTICO (tema claro) ===== */
  color-scheme: light dark;

  --cor-fundo: var(--p-branco);
  --cor-superficie: var(--p-nevoa);
  --cor-superficie-apertada: var(--p-nevoa-funda);
  --cor-texto: var(--p-cinza-950);
  --cor-texto-2: var(--p-cinza-700);
  --cor-texto-3: var(--p-cinza-600);
  --cor-linha: var(--p-cinza-100);
  --cor-borda-campo: var(--p-cinza-200);
  --cor-icone: var(--p-cinza-400);
  --cor-destaque: var(--p-azul); /* fundo de botao, barra de progresso */
  --cor-destaque-apertado: var(--p-azul-fundo);
  --cor-destaque-texto: var(--p-azul); /* link e botao de texto */
  --cor-sobre-destaque: var(--p-branco);
  --cor-ok: var(--p-verde);
  --cor-erro: var(--p-vermelho);
  --cor-erro-fundo: var(--p-vermelho-nevoa);
  --cor-foco: var(--p-azul);

  --fonte: var(--p-fonte);
  /* a escala do iOS (titulo grande 34, titulo 28, corpo 17, nota 13), nada abaixo de 11 */
  --tipo-titulo-grande: 700 var(--p-tam-34) / 1.12 var(--fonte);
  --tipo-titulo: 700 var(--p-tam-28) / 1.15 var(--fonte);
  --tipo-titulo-2: 700 var(--p-tam-20) / 1.25 var(--fonte);
  --tipo-numero: 600 var(--p-tam-28) / 1 var(--fonte);
  --tipo-corpo: 400 var(--p-tam-17) / 1.45 var(--fonte);
  --tipo-forte: 600 var(--p-tam-16) / 1.35 var(--fonte);
  --tipo-texto: 400 var(--p-tam-15) / 1.45 var(--fonte);
  --tipo-nota: 500 var(--p-tam-13) / 1.4 var(--fonte);
  --tipo-secao: 600 var(--p-tam-13) / 1.3 var(--fonte);
  --tipo-legenda: 600 var(--p-tam-11) / 1.2 var(--fonte);
  /* espacamento entre letras muda com o tamanho: titulo apertado, texto pequeno um pouco aberto */
  --letra-titulo: -0.02em;
  --letra-numero: -0.02em;
  --letra-secao: 0.06em;

  --esp-1: var(--p-4);
  --esp-2: var(--p-8);
  --esp-3: var(--p-12);
  --esp-4: var(--p-16);
  --esp-5: var(--p-20);
  --esp-6: var(--p-24);
  --esp-7: var(--p-28);
  --esp-8: var(--p-32);
  --esp-10: var(--p-40);
  --esp-12: var(--p-48);
  --esp-14: var(--p-56);
  --esp-16: var(--p-64);

  /* uma escala de cantos so: item 8, campo 12, cartao e botao 14, pilula para o campo redondo */
  --raio-item: 8px;
  --raio-campo: 12px;
  --raio-cartao: 14px;
  --raio-pilula: 999px;

  --alvo: 44px; /* toque minimo no celular (regua da Apple) */
  --linha-fina: 1px;
  --sombra-flutuante: 0 1px 2px rgb(17 17 17 / 6%), 0 8px 24px rgb(17 17 17 / 6%); /* so o que flutua (aviso) */
  --duracao-toque: 100ms;
  --duracao-curta: 180ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  --largura-conteudo: 70rem;
  --margem-tela: var(--esp-5);
  --area-topo: env(safe-area-inset-top, 0px);
  --area-baixo: env(safe-area-inset-bottom, 0px);
  --area-esquerda: env(safe-area-inset-left, 0px);
  --area-direita: env(safe-area-inset-right, 0px);

  /* ===== 3. COMPONENTE ===== */
  --cartao-fundo: var(--cor-superficie);
  --cartao-fundo-apertado: var(--cor-superficie-apertada);
  --cartao-raio: var(--raio-cartao);
  --cartao-espaco: var(--esp-4);

  --botao-fundo: var(--cor-destaque);
  --botao-fundo-apertado: var(--cor-destaque-apertado);
  --botao-texto: var(--cor-sobre-destaque);
  --botao-raio: var(--raio-cartao);
  --botao-altura: 52px;
  --botao-altura-compacta: var(--alvo);

  --campo-fundo: var(--cor-fundo);
  --campo-borda: var(--cor-borda-campo);
  --campo-raio: var(--raio-campo);
  --campo-altura: 50px;

  --chave-largura: 51px; /* a chave do iOS: 51 x 31 */
  --chave-altura: 31px;
  --chave-fundo: var(--p-chave-clara);
  --chave-ligada: var(--cor-destaque); /* a unica cor de destaque, como no desenho do CEO */
  --chave-bolinha: var(--p-branco);
  --chave-sombra: 0 3px 8px rgb(0 0 0 / 15%), 0 1px 1px rgb(0 0 0 / 16%);

  --linha-borda: var(--linha-fina) solid var(--cor-linha);
}

/* ===== 2. SEMANTICO (tema escuro): segue o celular; [data-tema] na raiz forca um dos dois ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: var(--p-noite);
    --cor-superficie: var(--p-noite-cartao);
    --cor-superficie-apertada: var(--p-noite-cartao-fundo);
    --cor-texto: var(--p-noite-texto);
    --cor-texto-2: var(--p-noite-texto-2);
    --cor-texto-3: var(--p-noite-texto-3);
    --cor-linha: var(--p-noite-linha);
    --cor-borda-campo: var(--p-noite-borda);
    --cor-icone: var(--p-noite-icone);
    --cor-destaque-texto: var(--p-azul-claro);
    --cor-ok: var(--p-verde-claro);
    --cor-erro: var(--p-vermelho-claro);
    --cor-erro-fundo: var(--p-vermelho-noite);
    --cor-foco: var(--p-azul-claro);
    --chave-fundo: var(--p-chave-escura);
    --sombra-flutuante: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  }
}
:root[data-tema="escuro"] {
  --cor-fundo: var(--p-noite);
  --cor-superficie: var(--p-noite-cartao);
  --cor-superficie-apertada: var(--p-noite-cartao-fundo);
  --cor-texto: var(--p-noite-texto);
  --cor-texto-2: var(--p-noite-texto-2);
  --cor-texto-3: var(--p-noite-texto-3);
  --cor-linha: var(--p-noite-linha);
  --cor-borda-campo: var(--p-noite-borda);
  --cor-icone: var(--p-noite-icone);
  --cor-destaque-texto: var(--p-azul-claro);
  --cor-ok: var(--p-verde-claro);
  --cor-erro: var(--p-vermelho-claro);
  --cor-erro-fundo: var(--p-vermelho-noite);
  --cor-foco: var(--p-azul-claro);
  --chave-fundo: var(--p-chave-escura);
  --sombra-flutuante: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
:root[data-tema="claro"] {
  color-scheme: light;
}

/* "Aumentar contraste" ligado no aparelho: a borda do campo e o texto de apoio ficam mais fortes (WCAG 1.4.11) */
@media (prefers-contrast: more) {
  :root {
    --cor-borda-campo: var(--p-cinza-600);
    --cor-texto-3: var(--p-cinza-700);
    --cor-linha: var(--p-cinza-200);
  }
}

/* computador (ponteiro fino): a margem cresce, o numero cresce, o botao pode ser mais baixo */
@media (min-width: 768px) {
  :root {
    --margem-tela: var(--esp-10);
    --tipo-numero: 600 var(--p-tam-40) / 1 var(--fonte);
  }
}
@media (min-width: 1024px) {
  :root {
    --margem-tela: var(--esp-14);
  }
}