/* Identidade visual da Blue Service — a única fonte de cor e tipografia do produto.
 *
 * Transcrito do Brandbook_BlueService_2020 (61 páginas, dez/2019): paleta na
 * página 20, tipografia na 37, elementos gráficos na 39. Os dez HEX foram
 * conferidos contra o RGB impresso no documento, sem divergência.
 *
 * ⚠️ ADR-003: o produto veste a marca da Blue Service por inteiro. Não há tema
 * por tenant. Trocar a identidade é editar ESTE arquivo, e só ele — é por isso
 * que nenhum componente pode escrever um HEX literal.
 *
 * ⚠️ As cores da MARCA e os papéis da INTERFACE estão separados de propósito.
 * `--bs-*` é o que o brandbook define e não se discute; `--ui-*` é como o
 * produto usa, e cada escolha carrega o contraste medido ao lado. Misturar os
 * dois faria a primeira pergunta difícil ("posso usar o rosa aqui?") virar
 * opinião, quando ela tem resposta numérica.
 */

/* Raleway e Palanquin são SIL Open Font License — as duas estão no Google Fonts.
 * O brandbook designa Palanquin Light explicitamente para "Site + Plataforma". */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600;700&family=Palanquin:wght@300;400;500&display=swap");

:root {
  /* ---------------------------------------------------------------------
   * A MARCA — brandbook p.20. Não inventar, não ajustar, não interpolar.
   * ------------------------------------------------------------------ */
  --bs-rosa: #fe1e52;
  --bs-roxo: #565294;
  --bs-azul-logo: #3c57a1; /* "Azul Logotipo Blue" */
  --bs-azul-escuro: #2f3f7c;
  --bs-marinho: #222444; /* "Azul Marinho (Background)" */
  --bs-neutro-100: #f5f6fa;
  --bs-neutro-200: #e4e7ef;
  --bs-neutro-300: #c3c8d7;
  --bs-neutro-400: #aab0c2; /* "Cinza Metálico (Background Alternativo)" */
  --bs-neutro-500: #7b859b;

  /* Tipografia — brandbook p.37 */
  --bs-fonte-titulo: "Raleway", "Trebuchet MS", sans-serif;
  --bs-fonte-texto: "Palanquin", "Raleway", "Trebuchet MS", sans-serif;
  /* "Raleway Light, caixa alta + espaçamento 960" */
  --bs-espacamento-caixa-alta: 0.096em;

  /* ---------------------------------------------------------------------
   * A INTERFACE — cada papel com o contraste WCAG medido.
   *
   * ⚠️ Os numeros do tema claro sao medidos contra o FUNDO DA PAGINA, que
   * desde 28/09 e tingido (#F5F6FA) e nao branco. Sao portanto o caso
   * CONSERVADOR: quase todo texto da interface vive dentro de um cartao, que
   * e branco, e ali o contraste e maior. Medir contra a pagina e de proposito
   * — o numero que se confere tem de ser o pior, nao o melhor.
   * Tema claro é o padrão: é onde a paleta tem folga de legibilidade.
   * ------------------------------------------------------------------ */
  /* ⚠️ A PAGINA e tingida e o CARTAO e branco — nao o contrario. Medido na
   * arte de referencia da Blue Service (28/09): pagina #F5F7FB, cartao
   * #FFFFFF. A primeira versao daqui tinha os dois trocados, e a diferenca
   * nao e estetica: cartao branco sobre fundo tingido tem borda propria sem
   * precisar de linha, enquanto cartao tingido sobre branco depende da borda
   * para existir — e borda some antes da cor quando a tela e ruim. */
  --ui-fundo: var(--bs-neutro-100);
  --ui-superficie: #ffffff;
  --ui-superficie-2: var(--bs-neutro-200);
  --ui-borda: var(--bs-neutro-300);
  --ui-borda-forte: var(--bs-neutro-400);

  --ui-texto: var(--bs-marinho); /* 13.9 — AAA */
  --ui-texto-suave: var(--bs-azul-escuro); /* 9.2 — AAA */
  --ui-link: var(--bs-azul-logo); /* 6.3 — AA */
  --ui-link-visitado: var(--bs-roxo); /* 6.4 — AA */

  /* ⚠️ O rosa reprova AA para texto normal em TODO fundo da paleta (3.8 no
   * branco). Ele existe como marca-d'água de destaque — barra, borda, ícone
   * grande, número de dashboard —, nunca como cor de corpo, rótulo pequeno ou
   * mensagem. O nome do token diz isso para quem for usá-lo sem ler daqui. */
  --ui-destaque-nao-textual: var(--bs-rosa);

  /* ⚠️ O MESMO rosa, com outro nome, porque a regra do WCAG é outra: texto
   * grande (>=24px) passa AA com 3.0, e o rosa dá 3.8 no branco e 3.9 no
   * marinho. Então ele PODE ser palavra — desde que a palavra seja grande.
   * Dois nomes para uma cor parece desperdício e é o contrário: é o que
   * impede "o rosa passa em texto grande" de virar "o rosa passa em texto".
   * `tests/test_marca.py` confere que toda regra que usa este token declara
   * tamanho suficiente. */
  --ui-destaque-texto-grande: var(--bs-rosa); /* 3.5 — AA-grande */

  /* Ação. O azul do logotipo como FUNDO de botão, com texto branco em cima —
   * o par medido é esse, e não o azul contra a página. Vale nos dois temas:
   * um botão sólido carrega o próprio fundo, então nada muda quando a página
   * escurece. É o único papel em que os azuis da marca sobrevivem ao escuro. */
  /* ⚠️ A COR DO TEXTO DO LOGO, e ela NAO e a cor do texto da pagina.
   * No claro, o logotipo da Blue Service usa o azul da marca — conferido
   * amostrando a arte oficial em 28/09: #3C57A0, a um dígito do #3C57A1 do
   * brandbook (a diferença é compressão do WebP). Usar `currentColor` ali
   * pintaria o logo de marinho, que é a cor do TEXTO e não da MARCA.
   *
   * ⚠️ No escuro ele NÃO pode ser esse azul: #3C57A1 sobre o marinho dá 2.2 e
   * some. Lá o logo vira neutro claro — a mesma regra que já vale para o link
   * (ADR-003), porque o azul é justamente o que não se lê no escuro. */
  --ui-marca-texto: var(--bs-azul-logo); /* 6.3 — AA */

  /* ⚠️ A barra do topo tem token PRÓPRIO, e não é firula: no claro ela é
   * branca (o cinza da superfície empoeirava o logo), e no escuro ela precisa
   * continuar mais clara que a página, senão some e o menu vira texto solto
   * boiando. São exigências opostas — um token só atenderia uma delas. */
  --ui-topo: #ffffff;

  --ui-acao: var(--bs-azul-logo); /* texto #ffffff sobre ela: 6.8 — AA */
  --ui-acao-forte: var(--bs-azul-escuro); /* texto #ffffff sobre ela: 9.9 — AAA */
  --ui-acao-texto: #ffffff;

  /* ⚠️ O brandbook NÃO define erro, sucesso nem aviso, e o rosa da marca não
   * pode cobrir "erro" porque reprova em texto. Estes três são provisórios,
   * escolhidos só pelo contraste, e estão na lista do kit de marca a pedir.
   * Enquanto forem provisórios, ficam aqui — e não espalhados. */
  --ui-erro: #b3123c; /* 6.3 — AA */
  --ui-sucesso: #1b6b45; /* 6.0 — AA */
  --ui-aviso: #8a5a00; /* 5.5 — AA */

  /* ---------------------------------------------------------------------
   * O TEMA ESCURO, definido UMA vez.
   *
   * O brandbook lista o azul marinho como um dos dois fundos permitidos, então
   * o escuro não é invenção nossa — é a outra metade da regra da p.39.
   *
   * ⚠️ Ele mora aqui, e não dentro dos seletores, porque são DOIS seletores: a
   * media query (preferência do sistema) e o atributo (escolha explícita). Com
   * os valores dentro deles, a mesma paleta existiria em duas cópias — e cópia
   * diverge. Abaixo, os seletores só apontam para estes tokens.
   *
   * ⚠️ Repare no que some no escuro: os azuis da marca. #3C57A1 sobre #222444
   * dá 2.2, que é ilegível. Link no escuro é neutro claro, justamente porque o
   * azul é o que não se lê ali.
   * ------------------------------------------------------------------ */
  --escuro-fundo: var(--bs-marinho);
  --escuro-superficie: #28315c; /* texto #ffffff sobre ela: 12.5 — AAA */
  --escuro-superficie-2: #333763; /* texto #ffffff sobre ela: 11.2 — AAA */
  --escuro-borda: #3f4270;
  --escuro-borda-forte: var(--bs-neutro-500);
  --escuro-texto: #ffffff; /* 15.0 — AAA */
  --escuro-texto-suave: var(--bs-neutro-300); /* 8.9 — AAA */
  --escuro-link: var(--bs-neutro-100); /* 13.9 — AAA */
  --escuro-link-visitado: var(--bs-neutro-300); /* 8.9 — AAA */
  --escuro-erro: #ff8fa8; /* 6.9 — AA */
  --escuro-sucesso: #7fd4a8; /* 8.5 — AAA */
  --escuro-aviso: #ffc95c; /* 9.8 — AAA */
  --escuro-destaque-texto-grande: var(--bs-rosa); /* 3.9 — AA-grande */
  --escuro-marca-texto: var(--escuro-texto); /* 15.0 — AAA */
  --escuro-topo: var(--escuro-superficie);

  /* Barra degradê — brandbook p.39: azul SEMPRE à direita, no máximo 15px. */
  --bs-degrade: linear-gradient(90deg, var(--bs-rosa) 0%, var(--bs-roxo) 50%, var(--bs-azul-logo) 100%);
  --bs-degrade-altura: 15px;
}

/* Os dois gatilhos do tema escuro: a preferência do sistema e a escolha
 * explícita. Os dois apontam para os MESMOS tokens --escuro-*, definidos uma
 * única vez acima — `tests/test_marca.py` trava que estes dois blocos sejam
 * idênticos, porque a única forma de duas cópias não divergirem é alguém
 * conferir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ui-fundo: var(--escuro-fundo);
    --ui-superficie: var(--escuro-superficie);
    --ui-superficie-2: var(--escuro-superficie-2);
    --ui-borda: var(--escuro-borda);
    --ui-borda-forte: var(--escuro-borda-forte);
    --ui-texto: var(--escuro-texto);
    --ui-texto-suave: var(--escuro-texto-suave);
    --ui-link: var(--escuro-link);
    --ui-link-visitado: var(--escuro-link-visitado);
    --ui-erro: var(--escuro-erro);
    --ui-sucesso: var(--escuro-sucesso);
    --ui-aviso: var(--escuro-aviso);
    --ui-destaque-texto-grande: var(--escuro-destaque-texto-grande);
    --ui-marca-texto: var(--escuro-marca-texto);
    --ui-topo: var(--escuro-topo);
  }
}

:root[data-tema="escuro"] {
  --ui-fundo: var(--escuro-fundo);
  --ui-superficie: var(--escuro-superficie);
  --ui-superficie-2: var(--escuro-superficie-2);
  --ui-borda: var(--escuro-borda);
  --ui-borda-forte: var(--escuro-borda-forte);
  --ui-texto: var(--escuro-texto);
  --ui-texto-suave: var(--escuro-texto-suave);
  --ui-link: var(--escuro-link);
  --ui-link-visitado: var(--escuro-link-visitado);
  --ui-erro: var(--escuro-erro);
  --ui-sucesso: var(--escuro-sucesso);
  --ui-aviso: var(--escuro-aviso);
  --ui-destaque-texto-grande: var(--escuro-destaque-texto-grande);
  --ui-marca-texto: var(--escuro-marca-texto);
  --ui-topo: var(--escuro-topo);
}

/* --------------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */
body {
  background: var(--ui-fundo);
  color: var(--ui-texto);
  font-family: var(--bs-fonte-texto);
  font-weight: 300; /* Palanquin Light, como o brandbook designa */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bs-fonte-titulo);
  color: var(--ui-texto);
}

a {
  color: var(--ui-link);
}
a:visited {
  color: var(--ui-link-visitado);
}

/* A barra degradê da p.39. Fica no topo da página, e a altura é teto do
 * brandbook, não sugestão. */
.bs-barra-degrade {
  height: var(--bs-degrade-altura);
  max-height: 15px;
  background: var(--bs-degrade);
}