/* ============================================================
   RARE — Design tokens (Material Design 3)
   Paleta de marca (decisão de 25/07/2026): Azul Escuro, Azul Médio,
   Azul Claro, Fundo Claro e Branco, aplicada sobre a estrutura do M3
   em hierarquia 60/30/10 (branco base / azul escuro apoio / azul
   médio acento). Temas: claro (padrão), escuro (auto + manual), modos
   de cor do painel de preferências. Cor NUNCA é o único diferenciador.
   ============================================================ */

:root {
  /* ---- Paleta de marca RARE ---- */
  --rare-azul-escuro: #0f1e52;
  --rare-azul-medio: #2b5bff;
  --rare-azul-claro: #c1d6ff;
  --rare-fundo-claro: #e8f1ff;
  --rare-fundo-ultra-claro: #f0f6fc;
  --rare-branco: #ffffff;

  /* ---- Cor: tema claro (padrão — branco 60% / azul escuro 30% / azul médio 10%) ---- */
  --cor-primaria: var(
    --rare-azul-escuro
  ); /* acento: botões-chave, destaque do quadro, pílula do item atual */
  --cor-sobre-primaria: var(--rare-branco);
  --cor-primaria-container: var(--rare-fundo-claro);
  --cor-sobre-primaria-container: var(--rare-azul-escuro);

  /* Secundária — indicador de item ativo na navegação (Azul Claro + texto Azul Escuro) */
  --cor-secundaria: var(--rare-azul-claro);
  --cor-sobre-secundaria: var(--rare-azul-escuro);
  --cor-secundaria-container: var(--rare-azul-claro);
  --cor-sobre-secundaria-container: var(
    --rare-azul-escuro
  ); /* 7.4:1 sobre o container (AAA) */

  --cor-superficie: var(--rare-branco);
  --cor-sobre-superficie: var(
    --rare-azul-escuro
  ); /* 12.4:1 sobre branco (AAA) */
  --cor-sobre-superficie-variante: var(--rare-azul-escuro);
  --cor-superficie-container-baixa: var(
    --rare-fundo-ultra-claro
  ); /* menu, cards, hero, navegações */
  --cor-superficie-container: var(--rare-fundo-ultra-claro);
  --cor-superficie-container-alta: var(--rare-azul-claro); /* hover de botões */

  --cor-contorno: var(--rare-azul-escuro);
  --cor-contorno-variante: color-mix(
    in srgb,
    var(--rare-azul-escuro) 35%,
    var(--rare-branco)
  );
  /* Borda bem mais clara, usada só na trilha (.rail) e no flyout. */
  --cor-contorno-rail: color-mix(in srgb, var(--rare-azul-escuro) 15%, var(--rare-branco));

  --cor-sucesso: #1b5e20; /* verde escuro AAA sobre claro */
  --cor-sucesso-container: #dcedc8;
  --cor-erro: #8c1d18; /* vermelho escuro AAA sobre claro */
  --cor-erro-container: #f9dedc;

  /* Cor de link — token ÚNICO para todo texto que leva a algum lugar.
     Cada tema/modo o redefine (ver decisão de 25/07/2026): claro azul-médio,
     escuro branco, alto contraste preto, amarelo sobre preto amarelo, preto
     sobre amarelo preto. Nos modos em que ele coincide com a cor do texto,
     quem distingue o link é o sublinhado global do seletor `a` (main.css) —
     nunca a cor sozinha (WCAG 1.4.1). */
  --cor-link: var(--rare-azul-medio);
  --cor-foco: var(--rare-azul-escuro);

  /* ---- Marca (logos do rodapé — ver rodape.php) ---- */
  /* Círculos do logotipo RARE. Cada tema e modo de cor redefine este token —
     ver os blocos adiante; no escuro ele vira branco. */
  --cor-marca-rare: var(--rare-azul-medio);
  --cor-logo-utfpr: #000000; /* logo UTFPR monocromática: preta no tema claro */

  /* ---- Trilha de navegação (desktop) ---- */
  --cor-icone-rail: var(--rare-azul-escuro);
  --cor-busca-fundo: var(--rare-fundo-claro);
  --cor-busca-frente: var(--rare-azul-escuro);

  /* ---- Tipografia (Atkinson Hyperlegible, com fallback de sistema) ---- */
  --fonte-base:
    "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-mono: "Cascadia Code", Consolas, "Roboto Mono", monospace;

  --tipo-display: 700 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.2 var(--fonte-base);
  --tipo-headline: 600 clamp(1.5rem, 1.3rem + 0.9vw, 2rem)/1.3 var(--fonte-base);
  --tipo-titulo: 600 1.25rem/1.4 var(--fonte-base);
  --tipo-subtitulo: 600 1.05rem/1.4 var(--fonte-base);
  /* Peso do texto de corpo. Interpolado DENTRO dos shorthands abaixo porque
     `font:` reseta font-weight — um override solto de font-weight seria
     apagado por qualquer regra que use os tokens. O recurso "Letras
     destacadas" troca só esta variável. A Atkinson Hyperlegible carregada
     tem 400 e 700, então o passo é binário (ver layout.php). */
  --peso-corpo: 400;
  --peso-rotulo: 500;

  --tipo-corpo: var(--peso-corpo) 1rem/1.6 var(--fonte-base);
  --tipo-rotulo: var(--peso-rotulo) 0.9rem/1.4 var(--fonte-base);

  /* ---- Forma (shape) ---- */
  --raio-xs: 4px;
  --raio-s: 8px;
  --raio-m: 12px;
  --raio-l: 16px;
  --raio-xl: 28px;
  --raio-pilula: 999px;

  /* ---- Elevação ---- */
  --elevacao-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --elevacao-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --elevacao-3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3);

  /* ---- Motion (M3 easing) ---- */
  --movimento-padrao: cubic-bezier(0.2, 0, 0, 1);
  --duracao-curta: 200ms;
  --duracao-media: 400ms;

  /* ---- Espaçamento ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* ---- Margem lateral da página (decisão de 30/08/2026) ----
     UMA medida para a distância entre o conteúdo e a borda da tela, aplicada
     num lugar só (.app__main em main.css). Antes cada bloco trazia a sua —
     8px no hero e nas abas, 16px no rodapé, 12px na barra superior, mais o
     recuo interno de cada cartão por cima —, e num celular o texto começava
     em 8, 16, 40 ou 46px conforme o bloco. Ao mexer no espaçamento lateral de
     alguma coisa, mexa AQUI: um bloco que traga margem lateral própria volta
     a sair da fila.

     Cartões e heros são exceção legítima: eles ocupam a largura inteira do
     conteúdo e recuam o texto POR DENTRO, que é o recuo de uma superfície, não
     o da página. */
  --margem-pagina: var(--esp-4);

  /* ---- Trilha de navegação: largura da trilha e do flyout ----
     Em rem, não px: precisam acompanhar o tamanho de texto do painel, senão
     os rótulos estouram a coluna. Equivalem a 128px e 240px no corpo padrão
     de 16px. Ver .app e .rail em main.css.

     8rem, e não os 7rem de antes (correção de 30/08/2026): a trilha foi
     medida só em português. "Recomendações" mede 93px, mas "Recomendaciones"
     mede 104 e "Recommendations", 106 — mais os 8px de recuo do item, os dois
     estouravam os 112px e quebravam no meio da palavra ("Recomendacione/s").
     Ao mexer neste valor, medir com o rótulo mais longo dos TRÊS idiomas. */
  --rail-largura: 8rem;
  --rail-flyout-largura: 15rem;

  /* ---- Recuo da coluna de leitura dentro de .doc ----
     Mesma matemática do recuo centralizado do rodapé (75rem + esp-4) nas
     páginas de documentação, só que expressa como margin-left. Proporcional
     à largura disponível (não um px fixo): acompanha o flyout da trilha e o
     zoom de página. Ver .doc__grade em main.css. */
  --doc-recuo-leitura: calc(max(0px, (100% - 75rem) / 2) + var(--esp-4));

  /* ---- Leitura (controladas pelo painel de preferências) ----
     Entrelinha e espaçamento entre letras são recursos SEPARADOS (decisão de
     25/07/2026): quem precisa de linhas mais arejadas nem sempre quer letras
     mais soltas, e vice-versa. Ver os blocos [data-entrelinhas] e
     [data-entre-letras] no fim deste arquivo. */
  --leitura-entrelinha: 1.6;
  --leitura-entre-letras: normal;
  --leitura-entre-palavras: normal;

  /* Medida da coluna no modo leitura (ver [data-leitura]).
     Em rem, não em ch: a Atkinson Hyperlegible tem dígitos largos, e o "0"
     que define o ch mede quase 1em nela — 65ch davam 1137px, mais que o
     dobro de uma linha confortável. 40rem rendem cerca de 55 caracteres por
     linha — dentro da faixa confortável de 45 a 75 — e acompanham o tamanho
     de texto escolhido no painel. */
  --leitura-medida: 40rem;

  color-scheme: light;
}

/* ---- Tema escuro automático (preferência do sistema) ----
   Hierarquia invertida da paleta RARE: superfície em Azul Escuro; texto e
   apoio em Branco/Fundo Claro; acento em Azul Claro (Azul Médio perde
   contraste — 1.9:1 — sobre fundo escuro, por isso não é reaproveitado aqui). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-primaria: var(
      --rare-azul-claro
    ); /* 7.4:1 sobre superfície escura (AAA) */
    --cor-sobre-primaria: var(--rare-azul-escuro);
    --cor-primaria-container: color-mix(
      in srgb,
      var(--rare-azul-escuro) 70%,
      black
    );
    --cor-sobre-primaria-container: var(--rare-fundo-claro);

    --cor-secundaria: var(--rare-azul-claro);
    --cor-sobre-secundaria: var(--rare-azul-escuro);
    /* 22% (não 35%): com o texto em Fundo Claro, 35% dava 5.6:1 — só AA.
       Em 22% sobe para 8.0:1 (AAA) e o container continua distinguível da
       superfície. */
    --cor-secundaria-container: color-mix(
      in srgb,
      var(--rare-azul-claro) 22%,
      var(--rare-azul-escuro)
    );
    --cor-sobre-secundaria-container: var(--rare-fundo-claro);

    --cor-superficie: var(--rare-azul-escuro);
    --cor-sobre-superficie: var(--rare-fundo-claro);
    --cor-sobre-superficie-variante: var(--rare-fundo-claro);
    --cor-superficie-container-baixa: color-mix(
      in srgb,
      var(--rare-azul-escuro) 85%,
      black
    );
    --cor-superficie-container: color-mix(
      in srgb,
      var(--rare-azul-escuro) 70%,
      black
    );
    --cor-superficie-container-alta: color-mix(
      in srgb,
      var(--rare-azul-escuro) 55%,
      black
    );

    --cor-contorno: var(--rare-fundo-claro);
    --cor-contorno-variante: color-mix(
      in srgb,
      var(--rare-fundo-claro) 35%,
      var(--rare-azul-escuro)
    );
    --cor-contorno-rail: color-mix(in srgb, var(--rare-fundo-claro) 15%, var(--rare-azul-escuro));

    --cor-sucesso: #a5d6a7;
    --cor-sucesso-container: #1b3620;
    --cor-erro: #f2b8b5;
    --cor-erro-container: #4a1210;

    --cor-link: var(--rare-branco); /* 15.8:1 sobre a superfície escura */
    --cor-foco: var(--rare-fundo-claro);

    /* Ver a nota do bloco de tema escuro manual, adiante. */
    --cor-marca-rare: var(--rare-branco);
    --cor-logo-utfpr: #ffffff;

    --cor-icone-rail: var(--rare-fundo-claro);
    --cor-busca-fundo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
    --cor-busca-frente: var(--rare-fundo-claro);

    color-scheme: dark;
  }
}

/* ---- Tema escuro manual (painel de preferências) ---- */
:root[data-tema="escuro"] {
  --cor-primaria: var(--rare-azul-claro);
  --cor-sobre-primaria: var(--rare-azul-escuro);
  --cor-primaria-container: color-mix(
    in srgb,
    var(--rare-azul-escuro) 70%,
    black
  );
  --cor-sobre-primaria-container: var(--rare-fundo-claro);

  --cor-secundaria: var(--rare-azul-claro);
  --cor-sobre-secundaria: var(--rare-azul-escuro);
  /* 22%: ver a nota no bloco de tema escuro automático acima. */
  --cor-secundaria-container: color-mix(
    in srgb,
    var(--rare-azul-claro) 22%,
    var(--rare-azul-escuro)
  );
  --cor-sobre-secundaria-container: var(--rare-fundo-claro);

  --cor-superficie: var(--rare-azul-escuro);
  --cor-sobre-superficie: var(--rare-fundo-claro);
  --cor-sobre-superficie-variante: var(--rare-fundo-claro);
  --cor-superficie-container-baixa: color-mix(
    in srgb,
    var(--rare-azul-escuro) 85%,
    black
  );
  --cor-superficie-container: color-mix(
    in srgb,
    var(--rare-azul-escuro) 70%,
    black
  );
  --cor-superficie-container-alta: color-mix(
    in srgb,
    var(--rare-azul-escuro) 55%,
    black
  );

  --cor-contorno: var(--rare-fundo-claro);
  --cor-contorno-variante: color-mix(
    in srgb,
    var(--rare-fundo-claro) 35%,
    var(--rare-azul-escuro)
  );
  --cor-contorno-rail: color-mix(in srgb, var(--rare-fundo-claro) 15%, var(--rare-azul-escuro));

  --cor-sucesso: #a5d6a7;
  --cor-sucesso-container: #1b3620;
  --cor-erro: #f2b8b5;
  --cor-erro-container: #4a1210;

  --cor-link: var(--rare-branco); /* 15.8:1 sobre a superfície escura */
  --cor-foco: var(--rare-fundo-claro);

  /* Branco no escuro (decisão de 30/08/2026): o Azul Médio é o único tom da
     marca que não foi redesenhado para fundo escuro — 1,9:1 sobre a
     superfície — e o símbolo do rodapé sumia nele. */
  --cor-marca-rare: var(--rare-branco);
  --cor-logo-utfpr: #ffffff;

  --cor-icone-rail: var(--rare-fundo-claro);
  --cor-busca-fundo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
  --cor-busca-frente: var(--rare-fundo-claro);

  color-scheme: dark;
}

/* ---- Modos de cor (painel de preferências) ----
   Combinações de alto desempenho de Arditi: preto×amarelo, amarelo×preto. */
:root[data-modo-cor="alto-contraste"] {
  --cor-primaria: #000000;
  --cor-sobre-primaria: #ffffff;
  --cor-primaria-container: #000000;
  --cor-sobre-primaria-container: #ffffff;
  --cor-secundaria: #000000;
  --cor-sobre-secundaria: #ffffff;
  --cor-secundaria-container: #000000;
  --cor-sobre-secundaria-container: #ffffff;
  --cor-superficie: #ffffff;
  --cor-sobre-superficie: #000000;
  --cor-sobre-superficie-variante: #000000;
  --cor-superficie-container-baixa: #ffffff;
  --cor-superficie-container: #f2f2f2;
  --cor-superficie-container-alta: #e6e6e6;
  --cor-contorno: #000000;
  --cor-contorno-variante: #555555;
  /* Contraste pleno: neste modo a borda da trilha não pode ser um fio suave,
     senão a separação entre trilha e conteúdo some. */
  --cor-contorno-rail: #000000;
  --cor-sucesso: #004d00;
  --cor-sucesso-container: #ffffff;
  --cor-erro: #7a0000;
  --cor-erro-container: #ffffff;
  --cor-link: #000000; /* sublinhado do seletor `a` faz a distinção */
  --cor-foco: #000000;
  --cor-icone-rail: #000000;
  --cor-busca-fundo: #000000;
  --cor-busca-frente: #ffffff;
  --cor-marca-rare: #000000; /* modo sem cor (Arditi): logo também vira preta */
  --cor-logo-utfpr: #000000;
  color-scheme: light;
}

:root[data-modo-cor="amarelo-preto"] {
  --cor-primaria: #ffe94e;
  --cor-sobre-primaria: #000000;
  --cor-primaria-container: #1a1a1a;
  --cor-sobre-primaria-container: #ffe94e;
  --cor-secundaria: #ffe94e;
  --cor-sobre-secundaria: #000000;
  --cor-secundaria-container: #1a1a1a;
  --cor-sobre-secundaria-container: #ffe94e;
  --cor-superficie: #000000;
  --cor-sobre-superficie: #ffe94e;
  --cor-sobre-superficie-variante: #ffe94e;
  --cor-superficie-container-baixa: #0d0d0d;
  --cor-superficie-container: #141414;
  --cor-superficie-container-alta: #1f1f1f;
  --cor-contorno: #ffe94e;
  --cor-contorno-variante: #8a7d1e;
  --cor-contorno-rail: #ffe94e;
  --cor-sucesso: #ffe94e;
  --cor-sucesso-container: #1a1a00;
  --cor-erro: #ffe94e;
  --cor-erro-container: #1a1a00;
  --cor-link: #ffe94e;
  --cor-foco: #ffffff;
  --cor-icone-rail: #ffe94e;
  --cor-busca-fundo: #ffe94e;
  --cor-busca-frente: #000000;
  --cor-marca-rare: #ffe94e;
  --cor-logo-utfpr: #ffe94e;
  color-scheme: dark;
}

:root[data-modo-cor="preto-amarelo"] {
  --cor-primaria: #000000;
  --cor-sobre-primaria: #ffe94e;
  --cor-primaria-container: #000000;
  --cor-sobre-primaria-container: #ffe94e;
  --cor-secundaria: #000000;
  --cor-sobre-secundaria: #ffe94e;
  --cor-secundaria-container: #000000;
  --cor-sobre-secundaria-container: #ffe94e;
  --cor-superficie: #ffe94e;
  --cor-sobre-superficie: #000000;
  --cor-sobre-superficie-variante: #1a1a1a;
  --cor-superficie-container-baixa: #fff3a1;
  --cor-superficie-container: #ffef7d;
  --cor-superficie-container-alta: #f5e12e;
  --cor-contorno: #000000;
  --cor-contorno-variante: #6b6320;
  --cor-contorno-rail: #000000;
  --cor-sucesso: #004d00;
  --cor-sucesso-container: #fff3a1;
  --cor-erro: #7a0000;
  --cor-erro-container: #fff3a1;
  --cor-link: #000000;
  --cor-foco: #000000;
  --cor-icone-rail: #000000;
  --cor-busca-fundo: #000000;
  --cor-busca-frente: #ffe94e;
  --cor-marca-rare: #000000;
  --cor-logo-utfpr: #000000;
  color-scheme: light;
}

/* ---- Tamanho de texto (painel de preferências) ---- */
:root[data-fonte="1"] {
  font-size: 112.5%;
}
:root[data-fonte="2"] {
  font-size: 125%;
}
:root[data-fonte="3"] {
  font-size: 150%;
}

/* ---- Modo leitura: tipografia (painel de preferências) ----
   Corpo um pouco maior e entrelinha mais generosa, já que a coluna fica
   estreita e sem nada em volta disputando atenção. Fica ANTES do bloco de
   entrelinhas de propósito: se a pessoa também ligou "Aumentar entrelinhas",
   a escolha explícita dela vence este padrão. */
:root[data-leitura="on"] {
  --tipo-corpo: var(--peso-corpo) 1.125rem/1.8 var(--fonte-base);
  --leitura-entrelinha: 1.8;
}

/* ---- Espaçamento de leitura (painel de preferências) ----
   Dois recursos independentes desde 25/07/2026 (antes eram um só,
   [data-espacamento], que ligava os dois de uma vez — main.js migra quem
   tinha a preferência antiga guardada).

   Os valores são os PISOS da WCAG 1.4.12: 1.5× o corpo na entrelinha, 0.12em
   entre letras e 0.16em entre palavras. O antigo 0.06em entre letras ficava
   abaixo da norma. */
:root[data-entrelinhas="on"] {
  --leitura-entrelinha: 1.9;
}

:root[data-entre-letras="on"] {
  --leitura-entre-letras: 0.12em;
  --leitura-entre-palavras: 0.16em;
}

/* ---- Letras destacadas (painel de preferências) ----
   Sobe o texto de corpo e os rótulos de 400/500 para 700. Títulos ficam de
   fora: já são 600/700 e a família carregada não tem peso acima de 700. */
:root[data-peso="on"] {
  --peso-corpo: 700;
  --peso-rotulo: 700;
}