/*
 * Tokens da web, traduzidos do design system do iOS V14
 * (docs/referencia/swift-design-v14/: Cores, Tipografia, Componentes, Espaco, Raio,
 * Movimento). Todo valor de tela vem daqui; pt do iOS vira px 1:1 (em rem, para o
 * tamanho de texto do navegador continuar valendo). O que o iOS não tem vem marcado
 * como estimado.
 *
 * Três temas, como o `TemaDoApp`: o claro (marfim) na raiz, o sépia e o escuro pelo
 * atributo `data-tema` do <html>, que o app põe a partir da escolha da pessoa ou da
 * preferência do sistema (apps/web/src/tema.ts). O dourado do destaque é o mesmo nos
 * três e vale só no que está escolhido, no botão de ação e na ferramenta ativa;
 * links e ações em texto ficam no secundário do tema.
 */

:root {
  color-scheme: light;

  /* Cores do claro: a paleta marfim (Cores.fundoNeutroClaro e PaletaSepia.marfim). */
  --cor-fundo: #faf7f0;
  --cor-superficie: #f4f1e8;
  --cor-controle: #eeebe2;
  --cor-hairline: rgb(0 0 0 / 0.08);
  --cor-texto: #2e2a24;
  --cor-texto-secundario: #5e574c;
  --cor-texto-terciario: #6c6457;
  /* Redação anterior tachada. O iOS usa o texto com alfa; aqui, AA também sobre grifo. */
  --cor-texto-anterior: #5e574c;
  /* Links e ações em texto (Cores.acaoTexto = textoSecundario). */
  --cor-acao-texto: #5e574c;
  /* Anel de foco: a cor do texto, que tem contraste sobre todas as superfícies (estimado). */
  --cor-foco: #2e2a24;
  /* O destaque dourado (asset Destaque) e o texto quase preto sobre ele (8,6:1). */
  --cor-acento: #d4af37;
  --cor-texto-sobre-acento: #1a1610;
  /* Fundo do item escolhido: a tinta clara do dourado (Cores.acentoSuave). */
  --cor-acento-suave: #f6efdd;
  /* Radio de um item não escolhido (Cores.radioVazio), 3:1 sobre as superfícies. */
  --cor-radio-vazio: #857e72;
  /*
   * Traço, borda fina e indicador de seleção (Cores.acentoTraco, S3): o dourado escuro nos
   * temas claros, para o traço dar 3:1; os preenchimentos seguem no --cor-acento.
   */
  --cor-acento-traco: #8c6e17;
  /* Contorno do botão secundário (Cores.contornoControle, S10), 3:1 sobre as superfícies. */
  --cor-contorno-controle: #857e72;
  /*
   * Ação destrutiva (excluir conta). O iOS usa o papel `.destructive` (systemRed);
   * estimado: um vermelho mais escuro, para o texto passar no AA sobre o fundo.
   */
  --cor-destrutiva: #b3261e;
  --cor-texto-sobre-destrutiva: #ffffff;
  /* Contorno do campo de busca, um pouco mais firme que o hairline (Cores.campoDeBuscaContorno). */
  --cor-contorno-campo: rgb(0 0 0 / 0.16);
  /* Sombra do que flutua (barra de grifo, aviso): Cores.sombraFlutuante. */
  --cor-sombra: rgb(0 0 0 / 0.1);
  /* Leitura em voz alta: um véu do destaque no dispositivo falado (Cores.vozBloco). */
  --cor-voz: rgb(212 175 55 / 0.1);

  /*
   * Papéis do chrome, sobre a escada acima. Abas em fichário (Cores.faixaDasFichas e
   * fichaAtras): a faixa recua dois degraus, a ficha de trás um, e a da frente tem a cor
   * da página que ela encabeça. As barras do leitor ficam no cartão, como nas capturas.
   */
  --cor-faixa: var(--cor-controle);
  --cor-ficha-atras: var(--cor-superficie);
  --cor-barra: var(--cor-superficie);

  /* Tipografia: Source Serif 4 no texto de lei (FonteLei); sistema no chrome (SF no iOS). */
  --fonte-lei: 'Source Serif 4', Georgia, serif;
  --fonte-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Título das abas (Vade Mecum, Hoje...): 28 pt nas capturas do iPhone e do iPad. */
  --tamanho-titulo-aba: 1.75rem;
  /* Seção de uma lista ("Constitucional"): title2, 22 pt. */
  --tamanho-titulo-secao: 1.375rem;
  --tamanho-titulo-tela: 1.4375rem; /* 23 pt (TipografiaUI.tituloTela) */
  --tamanho-linha: 1.0625rem; /* 17 pt */
  --tamanho-secundario: 0.9375rem; /* 15 pt */
  --tamanho-rotulo-secao: 0.8125rem; /* 13 pt */
  --tamanho-legenda: 0.75rem; /* caption, 12 pt */
  --peso-titulo: 500;

  /*
   * Leitor (Personalização do iOS: Source Serif, entrelinha justa 1,3, 0,8 em entre
   * parágrafos). O tamanho é o das capturas: 19 pt no iPhone, 21 pt no iPad.
   */
  --leitor-tamanho: 1.1875rem;
  --leitor-altura-linha: 1.3;
  --leitor-medida: 42.5rem; /* a coluna de 680 pt do iPad */
  --leitor-espaco-artigo: 0.4em;
  --leitor-espaco-paragrafo: 0.8em;
  --leitor-espaco-cabecalho: 1.4em;
  --leitor-espaco-rubrica: 1.2em;
  --leitor-recuo-item: 1.2em;
  --leitor-recuo-ementa: 18%;

  /* Espaço (grade de 4 pt). */
  --espaco-xs: 0.25rem;
  --espaco-s: 0.5rem;
  --espaco-m: 0.75rem;
  --espaco-l: 1rem;
  --espaco-xl: 1.25rem;
  /* Margem lateral das telas: 20 pt no iPhone, 28 pt no iPad (capturas). */
  --margem-tela: 20px;
  /* Ritmo vertical das abas, medido nas capturas: acima do título, em volta da seção e nas linhas. */
  --respiro-titulo: 32px;
  --respiro-secao: 24px;
  --respiro-linha: 16px;

  /* Geometria do chrome, medida nas capturas: barras de 44 pt (as fichas têm o alvo mínimo). */
  --altura-barra-de-navegacao: 44px;
  --altura-ferramentas: 52px;
  --respiro-faixa: 4px;

  /* Raio. */
  --raio-campo: 8px;
  --raio-cartao: 12px;
  --raio-pilula: 14px;
  /* Botões de ação têm cantos retos (BotaoPrimario e Segmentado usam Rectangle). */
  --raio-acao: 0;
  /* Botão que confirma uma ação destrutiva: cantos retos, como os de ação. */
  --raio-acao-destrutiva: 0;
  /* Botão de ação do paywall: cantos retos (T40c). */
  --raio-reto: 0;

  /* Movimento: ease-out sem overshoot; Reduzir Movimento zera. */
  --movimento-curta: 120ms;
  --movimento-media: 180ms;
  --movimento-longa: 240ms;
  --movimento-curva: cubic-bezier(0, 0, 0.58, 1);

  /* Alvo mínimo de toque. */
  --alvo-minimo: 44px;

  /* Amostras de página e tema (TemaEPagina): a página de cada tema, fixa em qualquer tema. */
  --amostra-claro: #faf7f0;
  --amostra-sepia: #f3ead7;
  --amostra-escuro: #1c1c1c;

  /* Véu atrás de um diálogo modal (o leitor continua visível, esmaecido). */
  --veu-dialogo: rgb(0 0 0 / 0.35);

  /* Linha de licença do conteúdo autoral na impressão (M7): preto no papel, em qualquer tema (só web). */
  --impressao-texto: #000000;
  --impressao-tamanho: 9pt;

  /*
   * Grifo (Cores.grifoSwatch e LinhaRenderer.corDeGrifo): os canais do pastel de
   * cada cor, usados com o alfa (0,82 no claro e no sépia, 0,30 no escuro, para o
   * texto seguir legível): rgb(var(--grifo-amarelo) / var(--grifo-alfa)). O
   * sublinhado usa o vermelho opaco.
   */
  --grifo-alfa: 0.82;
  --grifo-amarelo: 251 231 162;
  --grifo-verde: 198 231 192;
  --grifo-azul: 187 217 242;
  --grifo-rosa: 245 198 214;
  --grifo-lilas: 220 199 239;
  --grifo-sublinhado: rgb(232 140 140);

  /*
   * Busca na norma (Cores.destaqueBusca e LinhaRenderer.aplicarDestaqueBusca): o
   * dourado da identidade, em canais, com fundo de alfa 0,24 e sublinhado de 0,75. O
   * fundo cobre o grifo em vez de somar a ele, para o texto seguir AA. A ocorrência
   * atual, que o iOS não distingue, sobe o fundo e engrossa o sublinhado (estimado).
   */
  --busca-destaque: 198 152 47;
  --busca-alfa: 0.24;
  --busca-alfa-atual: 0.4;
  --busca-alfa-traco: 0.75;

  /* Tons de matéria (tonsDeMateria no tokens.json). */
  --tom-petroleo: #1e6b70;
  --tom-verde: #2e6b3a;
  --tom-vinho: #8c2b3a;
  --tom-ocre: #845600;
  --tom-ameixa: #6a3d7a;
  --tom-terracota: #9a4220;
  --tom-ardosia: #45586b;
  --tom-grafite: #555b63;
  --tom-oliva: #5c6416;
  --tom-verde-oliva: #535c3a;
  --tom-framboesa: #9c2463;
}

/* Sépia: a paleta do Inspetor lateral aprovado (PaletaSepia.inspetor). */
:root[data-tema='sepia'] {
  color-scheme: light;
  --cor-fundo: #f3ead7;
  --cor-superficie: #eee3cc;
  --cor-controle: #f8f0df;
  --cor-hairline: rgb(201 189 166); /* #C9BDA6, opaco como no iOS */
  --cor-texto: #302a20;
  --cor-texto-secundario: #6f6049;
  --cor-texto-terciario: #6f6049;
  --cor-texto-anterior: #5a4e3d;
  --cor-acao-texto: #6f6049;
  --cor-foco: #302a20;
  --cor-acento: #d4af37;
  --cor-texto-sobre-acento: #1a1610;
  --cor-acento-suave: #eee2c4;
  --cor-radio-vazio: #857e72;
  --cor-acento-traco: #8c6e17;
  --cor-contorno-controle: #857e72;
  --cor-destrutiva: #b3261e;
  --cor-texto-sobre-destrutiva: #ffffff;
  /*
   * O secundário do sépia tem só 5,1:1 sobre a página: a ocorrência da busca usa um
   * véu mais leve para o rótulo dos cabeçalhos seguir AA dentro dela (estimado).
   */
  --busca-alfa: 0.12;
  --busca-alfa-atual: 0.16;
}

/* Escuro: o carvão neutro (Cores.fundoNeutroEscuro e a escada por tom). */
:root[data-tema='escuro'] {
  color-scheme: dark;
  --cor-fundo: #1c1c1c;
  --cor-superficie: #292929;
  --cor-controle: #363636;
  --cor-hairline: rgb(255 255 255 / 0.08);
  --cor-texto: #e9e9ea;
  --cor-texto-secundario: #b8b8b8;
  --cor-texto-terciario: #a1a1a1;
  --cor-texto-anterior: #d0d0d0;
  --cor-acao-texto: #b8b8b8;
  --cor-foco: #e9e9ea;
  --cor-acento: #d4af37;
  --cor-texto-sobre-acento: #1a1610;
  --cor-acento-suave: #2a2416;
  --cor-radio-vazio: #80858a;
  --cor-acento-traco: #d4af37;
  --cor-contorno-controle: #80858a;
  --cor-destrutiva: #ffb4ab;
  --cor-texto-sobre-destrutiva: #5c0a05;
  --cor-contorno-campo: rgb(255 255 255 / 0.22);
  --cor-sombra: rgb(0 0 0 / 0.45);
  --grifo-alfa: 0.3;
  --busca-destaque: 212 169 63;
  --busca-alfa-atual: 0.3;

  /* Tons de matéria (tonsDeMateria no tokens.json). */
  --tom-petroleo: #7cc4c8;
  --tom-verde: #8fcb97;
  --tom-vinho: #e8a0ac;
  --tom-ocre: #e2b85e;
  --tom-ameixa: #cda8db;
  --tom-terracota: #f0a580;
  --tom-ardosia: #b3c2cf;
  --tom-grafite: #bcc2ca;
  --tom-oliva: #c3cc7a;
  --tom-verde-oliva: #b7bf9a;
  --tom-framboesa: #f29cc8;
}

/*
 * As páginas públicas não rodam JavaScript e ficam sem data-tema: seguem o escuro do
 * aparelho com o mesmo bloco acima (um teste confere que os dois são iguais). O app sempre
 * põe data-tema e continua por ele.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --cor-fundo: #1c1c1c;
    --cor-superficie: #292929;
    --cor-controle: #363636;
    --cor-hairline: rgb(255 255 255 / 0.08);
    --cor-texto: #e9e9ea;
    --cor-texto-secundario: #b8b8b8;
    --cor-texto-terciario: #a1a1a1;
    --cor-texto-anterior: #d0d0d0;
    --cor-acao-texto: #b8b8b8;
    --cor-foco: #e9e9ea;
    --cor-acento: #d4af37;
    --cor-texto-sobre-acento: #1a1610;
    --cor-acento-suave: #2a2416;
    --cor-radio-vazio: #80858a;
    --cor-acento-traco: #d4af37;
    --cor-contorno-controle: #80858a;
    --cor-destrutiva: #ffb4ab;
    --cor-texto-sobre-destrutiva: #5c0a05;
    --cor-contorno-campo: rgb(255 255 255 / 0.22);
    --cor-sombra: rgb(0 0 0 / 0.45);
    --grifo-alfa: 0.3;
    --busca-destaque: 212 169 63;
    --busca-alfa-atual: 0.3;

    /* Tons de matéria (tonsDeMateria no tokens.json). */
    --tom-petroleo: #7cc4c8;
    --tom-verde: #8fcb97;
    --tom-vinho: #e8a0ac;
    --tom-ocre: #e2b85e;
    --tom-ameixa: #cda8db;
    --tom-terracota: #f0a580;
    --tom-ardosia: #b3c2cf;
    --tom-grafite: #bcc2ca;
    --tom-oliva: #c3cc7a;
    --tom-verde-oliva: #b7bf9a;
    --tom-framboesa: #f29cc8;
  }
}

/* iPad (768 px ou mais): margens de 28 pt e o texto do leitor em 21 pt, como nas capturas. */
@media (min-width: 768px) {
  :root {
    --margem-tela: 28px;
    --respiro-linha: 20px;
    --leitor-tamanho: 1.3125rem;
    --respiro-faixa: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --movimento-curta: 0ms;
    --movimento-media: 0ms;
    --movimento-longa: 0ms;
  }
}