/* =========================================================================
   PORTAL DO TEA - Tokens
   Mundo visual: Sinalizacao Publica.
   Cor e codigo de rota, nao decoracao. Cada pilar tem faixa + marca de forma.
   ========================================================================= */

:root {
  /* --- Superficies ------------------------------------------------------ */
  --papel: #ffffff;
  --papel-2: #f4f5f7;      /* chapa: faixas de secao, rodape de bloco */
  --papel-3: #e9ecef;      /* recuo: slots de anuncio, caixas de apoio */
  --tinta: #14171a;        /* off-black, nunca #000 */
  --tinta-2: #3b444d;      /* texto secundario */
  --tinta-3: #616c78;      /* metadados, legendas */
  --fio: #d9dee3;          /* regra de 1px */
  --fio-forte: #b6bfc8;
  --selecao: #cfe2ff;

  /* --- Rotas (os 4 pilares) --------------------------------------------- */
  /* cor: a faixa cheia  |  tinta: a mesma cor legivel sobre papel */
  --editorias: #0b4da2;
  --editorias-tinta: #0b4da2;
  --editorias-sobre: #ffffff;

  --noticias: #c8251a;
  --noticias-tinta: #b01f15;
  --noticias-sobre: #ffffff;

  --entrevistas: #fd88bc;
  --entrevistas-tinta: #c2185b;
  --entrevistas-sobre: #14171a;

  --artigos: #f58220;
  --artigos-tinta: #a4500b;
  --artigos-sobre: #14171a;

  /* Acentos secundarios da marca: guia (verde), infograficos (rosa), aviso (amarelo) */
  --verde: #6fa82a;
  --verde-tinta: #4d7a13;
  --verde-sobre: #152c0c;   /* texto sobre a faixa verde cheia */
  --rosa: #d9407d;
  --rosa-tinta: #b02a60;    /* o rosa da marca em texto branco fica em 4.2:1 */
  --amarelo: #f2b705;
  --amarelo-sobre: #2b2200; /* texto sobre a placa de aviso */
  --vigor: #2f7a1e;         /* estado "em vigor" no bloco de status */

  /* Rota corrente: sobrescrita por [data-rota] */
  --rota: var(--editorias);
  --rota-tinta: var(--editorias-tinta);
  --rota-sobre: var(--editorias-sobre);

  /* --- Tipografia ------------------------------------------------------- */
  --placa: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --leitura: 'Literata', Georgia, 'Times New Roman', serif;

  --t-micro: 0.6875rem;   /* 11px - rotulos de placa */
  --t-mini: 0.8125rem;    /* 13px - metadados */
  --t-peq: 0.9375rem;     /* 15px - linha fina, listas densas */
  --t-base: 1.0625rem;    /* 17px - corpo padrao */
  --t-leitura: 1.1875rem; /* 19px - corpo de materia */
  --t-m: 1.375rem;
  --t-g: 1.75rem;
  --t-manchete: clamp(1.9rem, 1.15rem + 2.2vw, 2.9rem);
  --t-secao: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  /* titulo dentro do corpo de leitura: as pontas sao passos da rampa */
  --t-corpo-titulo: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);

  /* --- Ritmo ------------------------------------------------------------ */
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  --gutter: 1.5rem;
  --largura: 1280px;
  --largura-texto: 42rem;     /* ~68ch em Literata 19px */

  /* --- Forma ------------------------------------------------------------ */
  /* Sinalizacao e reta e plana: canto vivo, fio de 1px e filete de cor no
     topo. Nao existe raio nem sombra neste sistema; profundidade e feita de
     superficie (papel, chapa, recuo) e de regra. */

  /* --- Movimento -------------------------------------------------------- */
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --rapido: 140ms;
  --medio: 200ms;

  /* --- Camadas ---------------------------------------------------------- */
  /* Uma so: a ancora de anuncio fixa no rodape do celular. */
  --z-ancora: 60;
}

[data-rota='editorias']   { --rota: var(--editorias);   --rota-tinta: var(--editorias-tinta);   --rota-sobre: var(--editorias-sobre); }
[data-rota='noticias']    { --rota: var(--noticias);    --rota-tinta: var(--noticias-tinta);    --rota-sobre: var(--noticias-sobre); }
[data-rota='entrevistas'] { --rota: var(--entrevistas); --rota-tinta: var(--entrevistas-tinta); --rota-sobre: var(--entrevistas-sobre); }
[data-rota='artigos']     { --rota: var(--artigos);     --rota-tinta: var(--artigos-tinta);     --rota-sobre: var(--artigos-sobre); }
[data-rota='guia']        { --rota: var(--verde);       --rota-tinta: var(--verde-tinta);       --rota-sobre: #ffffff; }
[data-rota='infograficos']{ --rota: var(--rosa);        --rota-tinta: var(--rosa-tinta);        --rota-sobre: #ffffff; }

/* =========================================================================
   Leitura noturna. A cena real: mae lendo no celular depois que a casa dorme.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --papel: #121518;
    --papel-2: #1a1e23;
    --papel-3: #232930;
    --tinta: #eef1f4;
    --tinta-2: #b9c2cb;
    --tinta-3: #8d99a5;
    --fio: #2c333b;
    --fio-forte: #414a54;
    --selecao: #123a6b;

    --editorias: #5ea0f2;  --editorias-tinta: #7fb4f7;  --editorias-sobre: #0a1626;
    --noticias: #f2685b;   --noticias-tinta: #ff8478;   --noticias-sobre: #230906;
    --entrevistas: #35a8d4; --entrevistas-tinta: #57bde5; --entrevistas-sobre: #05161e;
    --artigos: #f59b4d;    --artigos-tinta: #f7b072;    --artigos-sobre: #221201;

    --verde: #9ccc55;
    --verde-tinta: #b7dd7f;
    --verde-sobre: #152c0c;
    --rosa: #ef6ea3;
    --rosa-tinta: #b02a60;
    --amarelo: #f5c73a;
    --amarelo-sobre: #2b2200;
    --vigor: #7cc45f;
  }
}

:root[data-tema='escuro'] {
  --papel: #121518;
  --papel-2: #1a1e23;
  --papel-3: #232930;
  --tinta: #eef1f4;
  --tinta-2: #b9c2cb;
  --tinta-3: #8d99a5;
  --fio: #2c333b;
  --fio-forte: #414a54;
  --selecao: #123a6b;

  --editorias: #5ea0f2;  --editorias-tinta: #7fb4f7;  --editorias-sobre: #0a1626;
  --noticias: #f2685b;   --noticias-tinta: #ff8478;   --noticias-sobre: #230906;
  --entrevistas: #35a8d4; --entrevistas-tinta: #57bde5; --entrevistas-sobre: #05161e;
  --artigos: #f59b4d;    --artigos-tinta: #f7b072;    --artigos-sobre: #221201;

  --verde: #9ccc55;
  --verde-tinta: #b7dd7f;
  --verde-sobre: #152c0c;
  --rosa: #ef6ea3;
  --rosa-tinta: #b02a60;
  --amarelo: #f5c73a;
  --amarelo-sobre: #2b2200;
  --vigor: #7cc45f;
}