/*
 * tokens.css — só design tokens (CSS custom properties).
 *
 * Paleta da marca Mentalize Joias: terracota (#9F3E2E), ameixa (#2A1013),
 * oliva (#666646), creme (#FEFDF2) e preto. O tema claro usa creme de fundo
 * com texto ameixa; o tema escuro (não especificado no manual de marca) é
 * derivado a partir do oliva escurecido, com a terracota clareada nos
 * destaques para manter contraste. Todas as combinações texto/fundo
 * verificadas em AA/AAA (WCAG).
 *
 * O tema inteiro do site é definido aqui. O bloco escuro aparece duas vezes
 * de propósito (é o preço honesto do zero-build, sem pré-processador):
 *   1. dentro de @media (prefers-color-scheme: dark), quando o visitante segue
 *      o sistema e NÃO forçou o tema claro;
 *   2. em :root[data-tema="escuro"], quando o visitante escolheu o escuro
 *      explicitamente (js/tema.js grava a escolha em localStorage).
 */

/*
 * Avenir — a fonte da marca, auto-hospedada em assets/fontes/ (woff2).
 * Auto-hospedada de propósito: sem Google Fonts, a CSP fica em 'self' para
 * estilos e fontes, e nenhuma requisição sai para terceiros ao carregar a
 * página.
 *
 * Os três arquivos licenciados cobrem toda a escala que o CSS usa. Como o
 * site só declara font-weight 600, 700 e 800 (além do 400 implícito do corpo
 * de texto), o Heavy é declarado como uma FAIXA 600–900: assim qualquer um
 * desses três pesos resolve para ele, sem o navegador sintetizar negrito
 * falso. O Book (mais leve que o Regular) fica disponível em 300–350 para
 * texto de exibição, caso um dia se queira um H1 mais leve.
 */
@font-face {
  font-family: "Avenir";
  src: url("../assets/fontes/avenir-book.woff2") format("woff2");
  font-weight: 300 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("../assets/fontes/avenir-regular.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("../assets/fontes/avenir-heavy.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/*
 * Best Stories — a segunda fonte do manual da marca, a manuscrita. É dela que
 * vem o "n" cursivo do wordmark "mentalize". Também auto-hospedada.
 *
 * Uso reservado a acentos curtos (uma palavra, uma assinatura): é uma fonte de
 * exibição, ilegível em corpo de texto e em tamanhos pequenos. Não entra em
 * --fonte; fica em --fonte-manuscrita, aplicada ponto a ponto.
 *
 * Um @font-face que nenhuma regra usa não é baixado pelo navegador, então
 * declarar isto aqui não custa nada enquanto o token não for aplicado.
 */
@font-face {
  font-family: "Best Stories";
  src: url("../assets/fontes/best-stories.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Cores */
  --cor-fundo: #fefdf2;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f3ecdd;
  --cor-texto: #2a1013;
  --cor-texto-suave: #5f4b43;
  --cor-borda: #e6dcc8;
  --cor-destaque: #9f3e2e;
  --cor-destaque-forte: #7e2f22;
  --cor-sobre-destaque: #fefdf2;
  --cor-ok: #2e7d32;
  --cor-aviso: #92400e;
  --cor-erro: #b3261e;
  --cor-codigo-fundo: #241016;
  --cor-codigo-texto: #f3ecdd;
  --gradiente: linear-gradient(120deg, #9f3e2e, #666646);

  /* Tipografia */
  --fonte: "Avenir", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-manuscrita: "Best Stories", "Segoe Script", cursive;
  --fonte-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Forma e ritmo */
  --raio: 14px;
  --raio-s: 8px;
  --sombra: 0 1px 2px rgb(42 16 19 / 0.05), 0 10px 28px -14px rgb(42 16 19 / 0.18);
  --duracao: 180ms;
  --largura-conteudo: 68rem;
}

/*
 * Tema escuro em verde-oliva: a marca não define um tom escuro oficial, então
 * esta escala é derivada do oliva #666646 (escurecido, mesma matiz), com
 * contraste verificado contra o texto creme (13:1 texto/fundo, AA/AAA em
 * todas as combinações). --cor-sobre-destaque continua um neutro escuro
 * próprio (não igual a --cor-fundo) só para o texto de botão manter bom
 * contraste sobre --cor-destaque.
 */

/* Tema escuro seguindo o sistema (sem escolha explícita do visitante). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --cor-fundo: #2b2b1d;
    --cor-superficie: #383825;
    --cor-superficie-2: #454530;
    --cor-texto: #fbf4e6;
    --cor-texto-suave: #c9b4a6;
    --cor-borda: #54543c;
    --cor-destaque: #d9714e;
    --cor-destaque-forte: #e8916e;
    --cor-sobre-destaque: #1c1c12;
    --cor-ok: #7fb77f;
    --cor-aviso: #e0b45c;
    --cor-erro: #f08a80;
    --cor-codigo-fundo: #16150d;
    --cor-codigo-texto: #f3ecdd;
    --gradiente: linear-gradient(120deg, #d9714e, #a6a063);
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -14px rgb(0 0 0 / 0.6);
  }
}

/* Tema escuro escolhido explicitamente (data-tema vem de js/tema-boot.js). */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --cor-fundo: #2b2b1d;
  --cor-superficie: #383825;
  --cor-superficie-2: #454530;
  --cor-texto: #fbf4e6;
  --cor-texto-suave: #c9b4a6;
  --cor-borda: #54543c;
  --cor-destaque: #d9714e;
  --cor-destaque-forte: #e8916e;
  --cor-sobre-destaque: #1c1c12;
  --cor-ok: #7fb77f;
  --cor-aviso: #e0b45c;
  --cor-erro: #f08a80;
  --cor-codigo-fundo: #16150d;
  --cor-codigo-texto: #f3ecdd;
  --gradiente: linear-gradient(120deg, #d9714e, #a6a063);
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -14px rgb(0 0 0 / 0.6);
}