/* ═══════════════════════════════════════════════════════════════════════════
   Hérnia de Disco · MUNDO COMUNIDADE · tokens v1 (rodada 00, fundação v2)

   Fonte: design/handoffs/handoff_hernia_00_fundacao_v2/reference/tokens/
   (fonts.css + colors.css + typography.css + spacing.css), num arquivo só.

   ⚠️ SÓ O MUNDO COMUNIDADE CARREGA ESTE ARQUIVO (/feed, /noticias, /programacao,
   /chat, /perfil e o /_sistema). As páginas de PICO — homes, cadastro, lotado,
   descadastro, legais, e-mails — continuam só com fontes do sistema e com o
   CSS delas (hd*.css). O PicoSemComunidadeTest guarda isso.

   ⚠️ NOME COM VERSÃO. /assets/ sai com cache imutável de 1 ano
   (infra/nginx/conf.d/hernia.conf): mudou o conteúdo, muda o nome (-v2).

   📌 DÍVIDA ACEITA: os valores de cor abaixo repetem os do hd.css (pico, rodada
   07). Unificar num arquivo de tokens só depois que a 07 terminar — ver
   REGISTRO-2026-09-28-rodada-00.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONTES ────────────────────────────────────────────────────────────────
   Do próprio domínio (CSP font-src 'self'): nada de Google em produção.
   Origem: github.com/google/fonts (ofl/), licença SIL OFL 1.1 — os textos
   estão em fontes/OFL-*.txt, e o copyright vai embutido em cada arquivo.
   Subconjunto: pyftsubset (fonttools 4.65) com --unicodes igual ao
   unicode-range abaixo, --no-hinting, --name-IDs=0-6,13,14, --flavor=woff2.
   Peso medido: 78,7 KB nos seis (registro da rodada 00).
   Pré-carregadas no layout: só Barlow 500 e Bowlby. */
@font-face { font-family: "Bowlby One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fontes/bowlby-one-400-latin-v1.woff2") format("woff2"); /* 21,3 KB · display */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Graduate"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fontes/graduate-400-latin-v1.woff2") format("woff2"); /* 6,6 KB · rótulo */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fontes/barlow-condensed-500-latin-v1.woff2") format("woff2"); /* 12,2 KB · corpo */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fontes/barlow-condensed-700-latin-v1.woff2") format("woff2"); /* 12,4 KB · nomes, botões */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fontes/barlow-condensed-800-latin-v1.woff2") format("woff2"); /* 12,3 KB · título < 18 px, abas */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fontes/barlow-condensed-600i-latin-v1.woff2") format("woff2"); /* 14,0 KB · chamada/piada */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }

/* ── CORES (mídia kit) ─────────────────────────────────────────────────────── */
:root {
  /* marca: os 7 do mídia kit */
  --bg:   #0B0A08;  /* preto carvão */
  --ink:  #F1D9A6;  /* creme envelhecido */
  --red:  #C71919;  /* vermelho vintage: borda, sombra, listra, ícone. Nunca texto. */
  --ora:  #E85A16;  /* laranja queimado */
  --mus:  #DDAA20;  /* mostarda retrô: ação principal, ativo, foco */
  --pet:  #087D9A;  /* azul petróleo: listra, borda "válido", pauta. Texto preto sobre ele: NÃO */
  --vin:  #781510;  /* vinho escuro: 2ª camada de sombra, contorno, fundo de selo de perigo */

  /* derivados: os da rodada 07 (já em produção nas páginas de pico) + 3 novos */
  --mute:        #D6C39C; /* texto secundário · 11,45:1 */
  --line:        #8A7A66; /* borda de controle, separador forte · 4,76:1 */
  --stamp:       #781510; /* carimbo sobre creme · 7,95:1 */
  --ink-dark:    #1A1512; /* tinta escura: texto sobre mostarda/creme */
  --dim:         #3A332B; /* fundo desabilitado, sulco do vinil */
  --top-line:    #2B2620; /* divisória da barra superior */
  --placeholder: #5F5347; /* exemplo dentro do campo creme · 5,41:1 */
  --tape:        rgba(214, 193, 143, .9);
  --pet-deep:    #06647B; /* bloco petróleo COM TEXTO: texto creme · 4,88:1 */
  --pet-hi:      #3997AE; /* petróleo como COR DE TEXTO/glifo no escuro · 5,85:1 */
  --red-hi:      #F0776B; /* vermelho como COR DE TEXTO no escuro (erro curto) · 7,1:1 */

  /* superfícies */
  --surface-app:    #0B0A08;
  --surface-card:   #14120E;
  --surface-raised: #1B1813;
  --surface-sheet:  #221F18; /* folha inferior, modal, bolha do chat */

  /* texto (saem do creme) */
  --text-heading: #F1D9A6; /* 14,3 */
  --text-body:    #D6C39C; /* 11,45 */
  --text-meta:    #B19F7A; /* 7,6 */
  --text-muted:   #9A8A6A; /* 5,9 · mínimo para metadado */
  --text-ghost:   #73674F; /* 3,6 · só desabilitado e decoração */

  /* estados */
  --state-live:        var(--mus);
  --state-changed:     var(--ora);
  --state-published:   var(--pet-hi);
  --state-danger:      var(--red);
  --state-danger-text: var(--red-hi);

  /* divisórias e campos */
  --divider:            #2E2920;
  --divider-strong:     #8A7A66;
  --field-border:       #8A7A66;
  --field-border-focus: #DDAA20;

  /* cores que estavam soltas no código do app */
  --highlight:        rgba(221, 170, 32, .14); /* mudança, linha em destaque, grupo temporário */
  --highlight-border: rgba(221, 170, 32, .55);
  --read-tick:        #3997AE;
  --author-1: #DDAA20; /* mostarda  7,7 sobre a bolha */
  --author-2: #F2803F; /* laranja   6,2 */
  --author-3: #E3A0AC; /* rosa      7,7 */
  --author-4: #5AAFC4; /* petróleo  6,6 */
  --author-5: #B9B45E; /* oliva     7,6 */
  --author-6: #8FC2A0; /* sálvia    8,1 */
  --author-7: #C9A0D8; /* lilás     7,4 */
  --veil-sheet: rgba(11, 10, 8, .62);
  --veil-modal: rgba(11, 10, 8, .70);
  --veil-alert: rgba(11, 10, 8, .75);
  --header-glass: rgba(11, 10, 8, .94);
}

/* ── TIPOGRAFIA: dois mundos, uma família ──────────────────────────────────
   :root = valores do PICO (pilhas do sistema), só como reserva.
   html.mundo-comunidade = as fontes do mídia kit. É a classe que o layout
   da comunidade põe no <html>; sem ela, nada deste arquivo troca de fonte. */
:root {
  --disp: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --mono: "Courier New", Courier, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ser:  Georgia, "Times New Roman", serif;
  --ser-style: italic; --ser-weight: 700;
  --disp-small: var(--disp); /* títulos abaixo de 18 px */
  --disp-small-weight: 400;
  --label-weight: 700; --label-track: .1em;

  --d-xl: min(2.75rem, 13vw);  --d-xl-lh: .95;
  --d-l:  min(2.125rem, 11vw); --d-l-lh: 1;
  --d-m:  min(1.625rem, 8vw);  --d-m-lh: 1.05;
  --d-s:  1.375rem;            --d-s-lh: 1.05;
  --d-xs: 1.125rem;            --d-xs-lh: 1.1;
  --d-track: 0;
  --label: .8125rem; --label-lh: 1.2;
  --body-l: 1.125rem; --body-m: 1.0625rem; --body-s: 1rem; --body-lh: 1.5; --body-weight: 400;
  --call: 1.3125rem; --call-lh: 1.3;

  --ts-title:    3px 3px 0 var(--red), 6px 6px 0 var(--vin);
  --ts-title-sm: 2px 2px 0 var(--red), 4px 4px 0 var(--vin);
}
@media (min-width: 56rem) { :root { --d-xl: 3.5rem; --call: 1.625rem; } }

html.mundo-comunidade {
  --disp: "Bowlby One", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mono: Graduate, "Courier New", Courier, monospace;
  --sans: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ser:  "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ser-style: italic; --ser-weight: 600;
  --disp-small: "Barlow Condensed", "Arial Narrow", sans-serif;
  --disp-small-weight: 800;
  --label-weight: 400; --label-track: .06em; /* Graduate só tem um peso (já é pesado) */

  /* Bowlby One é ~30% mais larga que Impact: escala própria. lh ≥ 1.08 não corta acento em caixa alta */
  --d-xl: 2.25rem;  --d-xl-lh: 1.08;
  --d-l:  1.75rem;  --d-l-lh: 1.1;
  --d-m:  1.375rem; --d-m-lh: 1.12;
  --d-s:  1.125rem; --d-s-lh: 1.15;   /* 18 px: último degrau em Bowlby */
  --d-xs: 1.0625rem; --d-xs-lh: 1.15; /* 17 px: Barlow Condensed 800, caixa alta */
  --d-track: .01em;
  --label: .8125rem; --label-lh: 1.25; /* rótulo: 13 px, o mínimo do handoff */
  --body-l: 1.25rem; --body-m: 1.125rem; --body-s: 1rem; --body-lh: 1.4; --body-weight: 500; /* corpo 18 px, mínimo 16 */
  --call: 1.375rem; --call-lh: 1.25;
}
@media (min-width: 56rem) { html.mundo-comunidade { --d-xl: 3rem; --d-l: 2.125rem; } }

/* "Esqueci os óculos": CSS puro, 137,5%. O checkbox #oculos mora no layout. */
html.oculos, html:has(#oculos:checked) { font-size: 137.5%; }

/* ── ESPAÇO, RAIO, TOQUE, SOMBRA, MOVIMENTO ────────────────────────────────── */
:root {
  /* espaço (múltiplos de 4) */
  --hairline: 1px;
  --xs: .25rem;  /* 4 */
  --sm: .5rem;   /* 8 */
  --md: .75rem;  /* 12 */
  --gutter: 1rem;/* 16 */
  --lg: 1.25rem; /* 20 */
  --xl: 1.75rem; /* 28 */
  --xxl: 2.5rem; /* 40 */

  /* raio: estética de impresso */
  --r-none: 0; --r-field: 2px; --r-toggle: 4px; --r-pill: 999px;

  /* toque */
  --hit-site: 2.75rem;  /* 44 */
  --hit-app: 3rem;      /* 48 */
  --hit-festa: 3.5rem;  /* 56 */
  --hit-cta: 4rem;      /* 64 */
  --tabbar: 4rem;       /* 64 */
  --player: 4rem;       /* 64 */
  --topbar: 3.5rem;     /* 56 */

  /* sombras: só deslocamento sólido */
  --sh-cta: 5px 5px 0 var(--red);
  --sh-cta-hover: 7px 7px 0 var(--red);
  --sh-card: 4px 4px 0 #000;
  --sh-sheet: 0 -3px 0 var(--vin);

  /* faixas setentistas: vermelho → laranja → mostarda → petróleo */
  --stripe-h: .5rem; --stripe-gap: .25rem;

  /* movimento */
  --dur-fast: .12s; --dur-sheet: .22s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-sheet: 0s; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}