/* =============================================================================
   Gradup · tokens.css — O CONTRATO de design (Direção B · "Encorajador")
   Adotado 1:1 do protótipo (docs/prototipo/estatico/gradup.css). Toda cor/tipo/espaço vive aqui.
   Regra de ouro: nenhum #hex fora deste arquivo. Cor nova = token (claro + dark).
   "compat" = tokens dos nomes antigos, mantidos até as telas migrarem p/ o sistema gu-*.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Tipografia ---- */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font: var(--font-sans); /* compat */
  --fs-display: 53px; --lh-display: 1.05;
  --fs-h1: 40px; --lh-h1: 1.1;
  --fs-h2: 30px; --lh-h2: 1.18;
  --fs-h3: 20px; --lh-h3: 1.3;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-caption: 12.5px;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-x: 800;
  --lh-base: 1.6; --lh-snug: 1.3; /* compat */

  /* ---- Espaço (base 4) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --space-0: 4px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; /* compat */

  /* ---- Forma + elevação ---- */
  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28,42,35,.06), 0 1px 3px rgba(28,42,35,.10);
  --shadow: 0 1px 3px rgba(28,42,35,.06), 0 12px 28px -12px rgba(28,42,35,.18);
  --shadow-lg: 0 1px 3px rgba(28,42,35,.06), 0 30px 60px -28px rgba(28,42,35,.32);

  /* ---- Motion (compat) ---- */
  --dur-1: 120ms; --dur-2: 300ms; --dur-3: 500ms; --ease-out: cubic-bezier(.2,.7,.2,1);

  /* ---- Superfícies ---- */
  --color-bg: #fbf7f0; --color-surface: #ffffff; --color-surface-2: #f4faf8; --color-surface-3: #f3eee3;
  --color-border: #ece3d4; --color-border-strong: #dcd2bf;
  /* Fundo do cabecalho fixo e do rodapé: DECISÃO 06/07, tonalidade azul-grafite SÓ no tema
     CLARO (o escuro fica intocado, já era um verde-grafite próprio). Como o fundo do header
     virou escuro no claro, o texto/ícones de cima dele NÃO podem mais usar --color-text/-muted
     (ficariam escuro-sobre-escuro); ganharam tokens dedicados --color-header-text/-muted/-accent
     (o "-accent" é o tom de hover/foco, emprestado dos tons já usados no tema escuro p/ ficar
     claro o bastante sobre fundo escuro). Contraste (WCAG) contra --color-header-bg (~L 0,034):
     --color-header-text #eef2f7 = 11,2:1 | --color-header-text-muted #b9c3d4 = 7,1:1 |
     --color-header-accent #46cdbe = 6,4:1 | --color-header-logo-blue #74aaff = 5,4:1 |
     --color-header-logo-green #4ecf85 = 6,3:1 — todos acima do piso AA (4,5:1 texto normal). */
  --color-header-bg: #24344c;
  --color-header-text: #eef2f7; --color-header-text-muted: #b9c3d4; --color-header-accent: #46cdbe;
  /* Correção 06/07 (rodada 2, achado 3): borda de repouso dos botões-fantasma do header (tema/
     sininho/hambúrguer/Entrar/Sair) e das divisórias do subcabeçalho da empresa. Antes usavam
     --color-border-strong (bege quente, pensado p/ fundo --color-surface), que destoa sobre o
     navy. Este tom é um cinza-azulado da própria família do header; contraste NÃO-textual (WCAG
     1.4.11, indicador de borda) contra --color-header-bg (~L 0,034): ~3,5:1, acima do piso 3:1. */
  --color-header-border: #7488a6;
  /* Rodapé: já era escuro nos 2 temas e --color-footer-text (claro) não muda; só o TOM do fundo
     no claro vira azul-grafite (mesma família do header, um pouco mais profundo). Contraste do
     --color-footer-text contra o novo fundo (~L 0,020): 14,2:1. */
  --color-footer-bg: #1b2739; --color-footer-text: #f4faf8;
  /* Faixas de largura total (ex.: "Como funciona" na home, hero da vitrine da empresa, barras do
     portal do auditor): antes eram verde (--color-brand-strong). Agora seguem o MESMO azul-grafite
     do menu superior/rodapé, nos 2 temas. São ALIAS dos tokens do header (que já têm contraste AA
     verificado: band-bg ~L 0,034; band-text #eef2f7 = 11,2:1; band-text-muted #b9c3d4 = 7,1:1) —
     como o header já muda por tema, o var() resolve o tom certo em claro e escuro sem redefinir. */
  --color-band-bg: var(--color-header-bg);
  --color-band-text: var(--color-header-text);
  --color-band-text-muted: var(--color-header-text-muted);
  /* Sobreposições de branco sobre a faixa ESCURA (band é alias do header, escuro nos 2 temas):
     usadas em cartões/chips dentro da band. Como a band é escura em claro e escuro, o mesmo valor
     de branco translúcido vale nos dois temas. --color-brand-glow é o brilho colorido sob cartões
     com fundo --color-brand (segue o tom da marca de cada tema). Contrato de tokens do CLAUDE.md:
     cor nova mora aqui, no claro E no escuro. */
  --color-band-overlay: rgba(255, 255, 255, .08);
  --color-band-overlay-2: rgba(255, 255, 255, .1);
  --color-brand-glow: rgba(15, 138, 126, .6);
  /* ---- Texto ---- */
  --color-text: #1c2a23; --color-text-muted: #586259;
  /* --color-text-soft escurecido p/ AA em texto pequeno. Par mais apertado do sistema:
     text-soft sobre --color-surface-2 mede 4,68:1, no limite do AA (4,5:1) para texto normal.
     Se qualquer um dos dois mudar, recalcular esse par antes de aceitar a mudança. */
  --color-text-soft: #6a7363;
  /* ---- Marca ---- */
  --color-brand: #0f8a7e; --color-brand-strong: #0a6b61; --color-brand-soft: #e6f4f1; --color-brand-soft-2: #d8efea;
  --color-on-brand: #ffffff; --color-brand-ink: #0a6b61;
  --color-accent: #f0a44e; --color-accent-strong: #cf7d1c; --color-accent-soft: #fbeed3; --color-on-accent: #5a3208;
  /* ---- Foco ---- */
  --color-focus: #0f8a7e; --ring: 0 0 0 3px rgba(15,138,126,.35);
  /* ---- Semânticas ---- */
  --color-success: #1f7a47; --color-success-bg: #eaf7ef; --color-success-text: #136a3a; --color-success-border: #bfe3cc;
  /* Assinatura: papel branco fixo + tinta escura, iguais no claro e no escuro (assinatura vive num fundo claro). */
  --color-signature-bg: #ffffff; --color-signature-ink: #1e1e1e;
  --color-danger: #c0392f; --color-danger-bg: #fdeceb; --color-danger-text: #a82a21; --color-danger-border: #f3c9c5;
  /* Tinta sobre o preenchimento SOLIDO de --color-danger (ex.: badge do sininho); AA verificado nos 2 temas. */
  --color-on-danger: #ffffff;
  --color-warning: #a4690f; --color-warning-bg: #fbf2de; --color-warning-text: #855310; --color-warning-border: #ecd9ad;
  --color-info: #1f51c0; --color-info-bg: #eef3fd; --color-info-text: #1a44a3; --color-info-border: #cdddf7;
  /* ---- Selos de acesso ---- */
  --color-free-bg: #eaf7ef; --color-free-text: #1c6e3f;
  --color-paid-bg: #eef3fd; --color-paid-text: #1a44a3;
  --color-directed-bg: #faf0d7; --color-directed-text: #7a4e0c; --color-directed-border: #ecd9ad;
  /* ---- 2º stop dos degradês de capa do card ---- */
  --color-paid-bg-2: #dbe6fb; --color-directed-bg-2: #f4e4bb;
  /* ---- Progresso ---- */
  --color-track: #ece6da; --color-progress: #0f8a7e;
  /* ---- Certificado (peça imprimível: sempre clara, igual nos 2 temas) ---- */
  --color-cert-bg: #fffdf8; --color-cert-bg-2: #fbf5ea; --color-cert-line: #d9d2c4;
  --color-cert-frame: #cfe4e1; --color-cert-seal: #fbeed3;
  --color-cert-text: #1c2a23; --color-cert-text-muted: #586259; --color-cert-text-soft: #6a7363;
  --color-cert-seal-border: #cf7d1c; --color-cert-seal-ink: #5a3208;
  /* Selo do PDF do certificado comum (medalhão de anel duplo + fita, certificado-pdf.html): 3 cores
     que só existiam como rgb() solto no template (fora do gate de CI, que só pega #hex). Nomes
     próprios (NÃO reaproveitam --color-cert-seal-border/-ink acima, que são de outro tom, usados
     no selo simples da tela certificado.html) porque o motor do PDF (openhtmltopdf) não lê var();
     o template mantém o rgb() literal com um comentário apontando pra cá (ver certificado-pdf.html). */
  --color-cert-seal-ribbon: #b56614; --color-cert-seal-ring-2: #d69e4a; --color-cert-seal-ink-2: #78420c;
  --color-cert-brand: #0f8a7e; --color-cert-brand-strong: #0a6b61;
  /* Pill "Aprovado" DENTRO da peça do certificado (tela): congelado nos 2 temas, pra não mudar de
     cor no dark como os --color-success-* mudariam. Mesmos valores CLAROS do success (bloco :root). */
  --color-cert-pill-text: #136a3a; --color-cert-pill-bg: #eaf7ef; --color-cert-pill-border: #bfe3cc;
  /* Dossiê de evidência (PDF portrait multi-página, company/dossie-curso-pdf.html): peça impressa,
     sempre clara nos 2 temas (mesma lógica dos --color-cert-*, congelados). 3 tons próprios que só
     existiam como rgb() solto no template (fora do gate de CI, que só pega #hex): fundo do cabeçalho
     da tabela de alunos, faixa zebrada das linhas pares e a barra vazia da mini-barra de progresso
     (este NÃO é o --color-track #ece6da do app; é um bege mais quente, próprio do documento impresso).
     O motor do PDF (openhtmltopdf) não lê var(); o template mantém o rgb() literal apontando pra cá. */
  --color-dossie-thead: #f0f6f4; --color-dossie-zebra: #fcfaf5; --color-dossie-track: #e6e0d4;
  /* ---- Marca Gradup: pilares (2 azuis + 1 verde com chapéu â) e wordmark Grad+up ---- */
  --color-logo-blue: #1e5fd0; --color-logo-green: #1f9d4f;
  /* Variantes fixas: peça do certificado (fundo sempre claro), rodapé (fundo sempre escuro) e
     agora o header (fundo escuro nos 2 temas desde 06/07) reusam os tons claros que já
     funcionavam sobre fundo escuro (mesmos valores do bloco dark abaixo). */
  --color-cert-logo-blue: #1e5fd0; --color-cert-logo-green: #1f9d4f;
  --color-footer-logo-blue: #74aaff; --color-footer-logo-green: #4ecf85; --color-footer-logo-accent: #f0a44e;
  --color-header-logo-blue: #74aaff; --color-header-logo-green: #4ecf85;
}

:root[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 1px 3px rgba(0,0,0,.5), 0 34px 64px -28px rgba(0,0,0,.7);

  --color-bg: #10171a; --color-surface: #18211f; --color-surface-2: #1d2825; --color-surface-3: #1b211e;
  --color-border: #2b3a35; --color-border-strong: #3a4d46;
  /* Mesma logica do claro: --color-surface (1,10:1 contra --color-bg) é fraco demais. Este tom
     (igual ao --color-surface-2) mede ~1,19:1 contra --color-bg e mantem --color-text-muted em
     ~6,9:1 (AA folgado). Nota: o chip do usuario logado (.gu-header-user-link) tambem usa
     --color-surface-2 como fundo; no escuro ele passa a "flutuar" quase sem contraste de
     preenchimento contra o header (so a borda de 1px o distingue). Aceitavel: o contraste
     texto/AA nao muda, e a borda ja era o elemento que definia o chip. */
  --color-header-bg: #1d2825;
  /* Header/rodapé no escuro ficam INTOCADOS (mesma decisão 06/07): estes tokens novos só
     existem para o app.css poder usar um nome único nos 2 temas; aqui valem exatamente o que
     --color-text/-muted/--color-brand-ink já eram (nenhuma mudança visual no escuro). */
  --color-header-text: #e8efe9; --color-header-text-muted: #a3b3a9; --color-header-accent: #5fd6c8;
  /* Mesmo valor de --color-border-strong no escuro (#3a4d46): os botões-fantasma do header já
     usavam essa borda aqui (herdada da regra base .gu-btn-ghost), então o token novo não muda
     nada visualmente no escuro, só dá um nome próprio p/ o app.css poder mirar o header nos 2
     temas com a mesma declaração. */
  --color-header-border: #3a4d46;
  --color-footer-bg: #0b1113; --color-footer-text: #e8efe9;
  /* Overlays da band (escura nos 2 temas): mesmo branco translúcido do claro; brand-glow segue o
     tom da marca escura (#22b8a8) para o brilho sob cartões com fundo --color-brand. */
  --color-band-overlay: rgba(255, 255, 255, .08);
  --color-band-overlay-2: rgba(255, 255, 255, .1);
  --color-brand-glow: rgba(34, 184, 168, .5);
  --color-text: #e8efe9; --color-text-muted: #a3b3a9; --color-text-soft: #86968c;
  --color-brand: #22b8a8; --color-brand-strong: #46cdbe; --color-brand-soft: #16302c; --color-brand-soft-2: #1d3d38;
  --color-on-brand: #04231f; --color-brand-ink: #5fd6c8;
  --color-accent: #f0a44e; --color-accent-strong: #f2b56f; --color-accent-soft: #2c2310; --color-on-accent: #3a2206;
  --color-focus: #46cdbe; --ring: 0 0 0 3px rgba(70,205,190,.4);
  --color-success: #34d27f; --color-success-bg: #13271b; --color-success-text: #6fe09e; --color-success-border: #234b34;
  --color-signature-bg: #ffffff; --color-signature-ink: #1e1e1e;
  --color-danger: #f0857a; --color-danger-bg: #2a1513; --color-danger-text: #f6a79e; --color-danger-border: #522a26;
  /* --color-danger no escuro e claro/salmao: tinta ESCURA por cima (nao branco) p/ manter AA. */
  --color-on-danger: #3a100b;
  --color-warning: #e6b863; --color-warning-bg: #2a2110; --color-warning-text: #ecc987; --color-warning-border: #4d3d1c;
  --color-info: #7aa0f5; --color-info-bg: #151d2e; --color-info-text: #a6c0f8; --color-info-border: #2c3b5c;
  --color-free-bg: #13271b; --color-free-text: #5fd690;
  --color-paid-bg: #151d2e; --color-paid-text: #93b4f7;
  --color-directed-bg: #2a2110; --color-directed-text: #e7c074; --color-directed-border: #4d3d1c;
  --color-paid-bg-2: #1b2740; --color-directed-bg-2: #3a2e15;
  --color-track: #26322e; --color-progress: #22b8a8;
  /* Certificado permanece claro tambem no dark (documento impresso). */
  --color-cert-bg: #fffdf8; --color-cert-bg-2: #fbf5ea; --color-cert-line: #d9d2c4;
  --color-cert-frame: #cfe4e1; --color-cert-seal: #fbeed3;
  --color-cert-text: #1c2a23; --color-cert-text-muted: #586259; --color-cert-text-soft: #6a7363;
  --color-cert-seal-border: #cf7d1c; --color-cert-seal-ink: #5a3208;
  /* Mesmo valor do claro (selo do PDF é sempre claro, ver nota acima no bloco :root). */
  --color-cert-seal-ribbon: #b56614; --color-cert-seal-ring-2: #d69e4a; --color-cert-seal-ink-2: #78420c;
  --color-cert-brand: #0f8a7e; --color-cert-brand-strong: #0a6b61;
  /* Mesmo valor claro do :root (pill da peça é sempre claro, ver nota acima). */
  --color-cert-pill-text: #136a3a; --color-cert-pill-bg: #eaf7ef; --color-cert-pill-border: #bfe3cc;
  /* Mesmo valor do claro (dossiê é peça impressa, sempre clara; ver nota no bloco :root). */
  --color-dossie-thead: #f0f6f4; --color-dossie-zebra: #fcfaf5; --color-dossie-track: #e6e0d4;
  /* Marca no dark: tons clareados p/ contraste sobre superficie escura. */
  --color-logo-blue: #74aaff; --color-logo-green: #4ecf85;
  --color-cert-logo-blue: #1e5fd0; --color-cert-logo-green: #1f9d4f;
  --color-footer-logo-blue: #74aaff; --color-footer-logo-green: #4ecf85; --color-footer-logo-accent: #f0a44e;
  --color-header-logo-blue: #74aaff; --color-header-logo-green: #4ecf85;
}