/* ==========================================================================
   WL MAQUETES — DESIGN TOKENS (INTRANET)

   Cópia fiel dos tokens do site institucional
   (20-SITES/WL-Site/site/src/styles/tokens.css + fonts.css), com dois ajustes:
   os caminhos das fontes viram relativos (a intranet abre sem servidor) e há
   um bloco extra de tokens só de interface — ver "CAMADA DE APLICAÇÃO".

   Regra herdada do site: seis cores, sem gradiente, cantos de no máximo 4px.
   ========================================================================== */

/* --- FONTES ---------------------------------------------------------------
   Source Serif 4 — SIL Open Font License, livre para uso web.
   Transat — tipografia comercial da Typetanic Fonts. O .woff2 não está aqui
   pelo mesmo motivo do site: falta o kit web do licenciante. Sem ele o
   navegador cai para a próxima fonte da pilha, sem quebrar o layout.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-light-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-semibold-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Transat";
  src: url("../fonts/transat-standard.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* --- COR ------------------------------------------------------------- */
  --c-cream:  #F0EDE8;  /* fundo principal · texto sobre fundos escuros    */
  --c-navy:   #082F4A;  /* texto principal · faixas escuras · rodapé       */
  --c-brown:  #67492D;  /* faixa de indicadores · superfícies de destaque  */
  --c-bronze: #9B7854;  /* botões · palavra em destaque nos títulos        */
  --c-sand:   #CCB9A4;  /* rótulos e títulos de card sobre fundo escuro    */
  --c-ink:    #282625;  /* base escura                                     */

  /* Variantes de acessibilidade — ver DESIGN-SYSTEM.md, seção Contraste.
     Bronze: usar em botão com texto abaixo de 24px.
     Areia: sobre o marrom, a areia original dá 4.30:1 e reprova para texto
     normal; clareada, sobe para 5.26:1. Sobre o navy a original já dá 7.29 e
     continua valendo — esta variante é só para a faixa marrom. */
  --c-bronze-aa: #846647;
  --c-sand-aa: #DCCDBC;

  /* --- SUPERFÍCIES ------------------------------------------------------ */
  --surface-default: var(--c-cream);
  --surface-stats:   var(--c-brown);
  --surface-dark:    var(--c-navy);
  --surface-footer:  var(--c-navy);

  /* --- TIPOGRAFIA ------------------------------------------------------- */
  --ff-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --ff-body: "Transat", "Source Serif 4", system-ui, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;

  --fs-display-xl: clamp(40px, 27.621px + 3.3010vw, 91px);
  --fs-display-lg: clamp(34px, 23.806px + 2.7184vw, 76px);
  --fs-display-md: clamp(30px, 23.689px + 1.6828vw, 56px);
  --fs-heading:    clamp(22px, 19.330px + 0.7120vw, 33px);
  --fs-body-lg:    clamp(18px, 14.845px + 0.8414vw, 31px);
  --fs-body:       clamp(17px, 14.573px + 0.6472vw, 27px);
  --fs-body-sm:    clamp(16px, 13.816px + 0.5825vw, 25px);
  --fs-label:      clamp(14px, 12.058px + 0.5178vw, 22px);

  --lh-display: 0.992;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  --ls-button: 0.01em;

  /* --- LAYOUT ----------------------------------------------------------- */
  --container-max: 1726px;
  --gutter: clamp(20px, 5vw, 97px);

  /* --- ESPAÇAMENTO (base 8) --------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;
  --section-y: clamp(64px, 8vw, 152px);

  /* --- OUTROS ------------------------------------------------------------ */
  --radius: 4px;
  --radius-foto: 4px;
  --transition: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ======================================================================
     CAMADA DE APLICAÇÃO — só existe na intranet

     O site institucional é peça de leitura: tipos grandes, respiro largo,
     nenhuma tabela. A intranet é ferramenta de trabalho — a mesma escala em
     27px daria oito linhas por tela. Estes tokens derivam dos originais em
     vez de substituí-los: a paleta é a mesma e os degraus de texto
     operacional param onde a escala do site começa.
     ====================================================================== */

  /* Texto de interface: tabelas, formulários, rótulos de status */
  --fs-ui-lg: clamp(17px, 15.8px + 0.32vw, 22px);
  --fs-ui:    clamp(15px, 14.3px + 0.19vw, 18px);
  --fs-ui-sm: clamp(13px, 12.5px + 0.13vw, 15px);
  --fs-ui-xs: clamp(11px, 10.8px + 0.06vw, 13px);

  /* Respiro interno das seções — a intranet é densa por natureza */
  --section-y-app: clamp(40px, 4vw, 76px);

  /* Traço de superfície. A régua do site é a troca de fundo, não a linha;
     numa tabela isso não se sustenta, então a linha entra como opacidade
     baixa do próprio navy/creme, nunca como um cinza novo na paleta. */
  --linha: color-mix(in srgb, var(--c-navy) 14%, transparent);
  --linha-forte: color-mix(in srgb, var(--c-navy) 26%, transparent);
  --linha-clara: color-mix(in srgb, var(--c-cream) 22%, transparent);

  /* Cartão sobre creme: creme puro sobre creme sumiria e branco não está na
     paleta — o card é o creme clareado. */
  --superficie-card: #F7F5F2;

  /* Estados. Aprovado/atenção/atrasado pedem sinal cromático que a paleta de
     seis cores não tem. Entram só como filete e texto de rótulo, nunca como
     área grande, para não disputar com a marca. */
  --st-ok:      #3F6B4B;
  --st-atencao: #A9762A;
  --st-risco:   #9B3B2F;

  /* Variante de preenchimento do âmbar. O tom acima serve como filete e como
     texto, mas preenchido com creme por cima dá 3.39:1 — reprova para texto
     normal. Escurecido, sobe para 4.86:1. Os outros dois estados passam no
     tom original (verde 5.26, vermelho 5.88) e não precisam de variante. */
  --st-atencao-fundo: #8A5E1C;
}

/* ==========================================================================
   PAPÉIS TIPOGRÁFICOS — os mesmos do site
   ========================================================================== */

.t-section {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-md);
  line-height: var(--lh-heading);
}

.t-brand {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-heading);
}

.t-accent {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--c-bronze);
}

.t-card-title {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
}

.t-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.t-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.t-button,
.t-nav {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

/* Rótulo de seção da intranet — o "olho" acima do título, em Source Serif
   semibold itálico, como os títulos de card do site. */
.t-rotulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui);
  color: var(--c-bronze-aa);
}

/* ==========================================================================
   BOTÃO
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 0 1.6em;
  background: var(--c-bronze-aa);
  color: var(--c-cream);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition);
}
.btn:hover { background: var(--c-brown); }

/* Secundário: fundo creme com texto marrom (7.00:1) — é assim no layout do
   site, não um botão vazado. */
.btn--secondary {
  background: var(--c-cream);
  color: var(--c-brown);
}
.btn--secondary:hover { background: var(--c-sand); }

/* Terciário: só contorno. Não existe no site (que não tem terceiro nível de
   ação), mas aqui há ações repetidas por linha de tabela em que dois botões
   cheios brigariam entre si. */
.btn--ghost {
  background: transparent;
  color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--c-navy) 6%, transparent);
}

.btn--sm {
  min-height: 34px;
  padding: 0 1.1em;
  font-size: var(--fs-ui-sm);
}

.btn:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}

/* ==========================================================================
   PISO DE QUALIDADE
   ========================================================================== */

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}