/* ═══════════════════════════════════════════════════════════════════════
   John's Company · DS v5 · tokens.css
   STATUS: proposta v5, sujeita a João (J-1…J-10 em 02-direcao.md §8.3).
   Este é o ÚNICO arquivo do DS com hex. components.css e as páginas usam
   só var(). Fonte de cada decisão: 02-direcao.md (§ indicado) e
   01-inventario.md (sigla:linha). Contrastes medidos: 03-medicoes.md.

   Camadas
     0. fontes (arquivos de hash canônico, F15)
     1. primitivos — paleta oficial + 2 derivados + estados + pedra
     2. escalas — tipo, espaço, raio (canto do J), movimento
     3. materiais — mesh-vivo, mesh-noite, mesh-claro, pedra, grão, vidros
     4. semânticos por modo — [data-modo="escuro"|"claro"]
     5. estruturas — .estr-mesh … .estr-sinal (8)
     6. formatos — .fmt-post .fmt-story .fmt-slide .fmt-a4
     7. aliases legados (remover após migração)

   URLs: todos os caminhos são relativos a ESTA pasta (ds-v5/). MEDIDO no
   Chromium (03-medicoes.md): url() dentro de variável resolve relativo à
   folha que USA o var(). Por isso materiais com url (pedra, grão, logo,
   ícone) só podem ser aplicados pelas classes de components.css
   (.jc-pedra, .jc-material, .estr-pedra, .jc-logo, .jc-icone…), nunca por
   var() em CSS de outra pasta nem em style="".
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. fontes ─────────────────────────────────────────────────────────
   Neue Power: só o peso Ultra (900) é licenciado. Arquivo canônico =
   NeuePower-Ultra-original-backup.ttf, 68.548 B, SHA-256 00107ec9…39b2
   (igual a apolo/relatorio/brand/fonts/). O NeuePower-Ultra.ttf de
   68.432 B NÃO é usado (F15). Mulish: TTF com hash igual ao acervo. */
@font-face{font-family:'Neue Power';src:url('../fonts/NeuePower-Ultra.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Mulish;src:url('../fonts/Mulish-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Mulish;src:url('../fonts/Mulish-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Mulish;src:url('../fonts/Mulish-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* reflexo do vidro que segue o ponteiro (SC:571-572) */
@property --px{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --py{syntax:'<percentage>';inherits:false;initial-value:0%}

:root{
  /* ── 1. primitivos ────────────────────────────────────────────────── */
  /* paleta oficial (DS §1) — nada além disto */
  --teal-vivo:#1C6794;          /* identidade */
  --teal-profundo:#0E3D59;      /* título e corpo no claro; chão alternativo no escuro */
  --teal-noite:#0D2533;         /* chão do escuro */
  --apoio-claro:#CFE3EA;        /* Névoa; corpo no escuro */
  --off-white:#F2F5F7;          /* chão do claro (= superficie-sutil) */
  --branco:#FFFFFF;             /* chão só no A4 impresso */
  /* off-white de mármore — direção de João, 23/10 ("o fundo não é off white, é branco").
     Chão do claro, visivelmente diferente do branco (1,22:1). Pendente de registro no DS. */
  --off-white-marmore:#EDE8DF;  /* chão claro · vivo 5,04 · profundo 9,40 · secundário 5,90 */
  --off-white-placa:#F6F3EE;    /* placa elevada sobre o chão claro */
  --texto-secundario:#475A65;   /* secundário no claro */
  --amarelo:#FFE556;            /* área e luz; letra só no escuro */
  --ouro:#D9AE4C;               /* fio, borda, lábio; nunca parede */
  --preto-marca:#061016;        /* só: Sinal, texto sobre grifo, chão de Ouro */

  /* derivados — no máximo dois (02 §2.7, F11) */
  --ouro-claro:#F0D07A;         /* L* ≈ 85 · número/fio de ouro legível no escuro e no vidro B · nunca fundo, nunca no claro */
  --luz-mesh:#3E9BD3;           /* L* ≈ 61 · só luz radial dentro de mesh, alfa ≤ .46 · nunca texto/preenchimento/série */

  /* estados por modo (02 §2.4, F7) — aviso NÃO tem cor própria: ouro + ícone */
  --erro-escuro:#FF6B66;        /* texto só em noite (5,68) e vidro B */
  --erro-claro:#B3261E;
  --positivo-escuro:#84DAB0;
  --positivo-claro:#157347;

  /* pedra (mármore) — SUP:86-87, TJ:3 */
  --pedra-alta:#FBFAF7;
  --pedra-meia:#F2F1EC;
  --pedra-baixa:#E8E7E1;
  --pedra-volta:#F4F3EF;

  /* parada central do degradê oficial do botão (vem do asset; 02 §2.7) */
  --ouro-degrade:#EBC54F;

  /* ── 2a. famílias e tipografia de tela (02 §2.6, F9) ──────────────── */
  --f-titulo:'Neue Power',Mulish,sans-serif;   /* só 900 */
  --f-texto:Mulish,ui-sans-serif,sans-serif;

  --t-display:clamp(44px,9vw,136px);   --lh-display:.90; --tr-display:-.04em;
  --t-h1:clamp(40px,6.6vw,96px);       --lh-h1:.94;      --tr-h1:-.035em;
  --t-h2:clamp(36px,5.6vw,84px);       --lh-h2:.96;      --tr-h2:-.03em;
  --t-h3:clamp(24px,2.2vw,32px);       --lh-h3:1.05;     --tr-h3:-.015em;
  --t-h4:20px;                         --lh-h4:1.25;
  --t-lead:clamp(18px,1.4vw,22px);     --lh-lead:1.5;
  --t-corpo:18px;                      --lh-corpo:1.55;
  --t-apoio:15px;                      --lh-apoio:1.5;
  --t-rotulo:13px;                     --tr-rotulo:.18em;  /* um tracking só (.12/.14/.2/.22 extintos) */
  --t-numero:clamp(64px,10vw,176px);   --lh-numero:.88;  --tr-numero:-.045em;
  --t-min-figura:11px;                 /* mínimo absoluto em figura */
  --ch-h2:17ch; --ch-lead:44ch; --ch-corpo:68ch;

  /* ── 2b. espaço (base 8; DS:338-349 + TK:34) ──────────────────────── */
  --e-0:4px; --e-1:8px; --e-2:16px; --e-3:24px; --e-4:32px; --e-5:48px; --e-6:64px; --e-7:96px; --e-8:128px;
  --margem:clamp(16px,4vw,48px);
  --largura:1200px;      /* conteúdo */
  --largura-l:1360px;    /* figura */

  /* ── 2c. raio + canto do J (02 §2.5, F4) ──────────────────────────
     canto do J = raio × .22, embaixo à esquerda (ordem: ↖ ↗ ↘ ↙) */
  --raio-p:4px;
  --raio-m:8px;
  --raio-g:16px;            --raio-g-j:16px 16px 16px 4px;
  --raio-painel:24px;       --raio-painel-j:24px 24px 24px 5px;
  --raio-palco:32px;        --raio-palco-j:32px 32px 32px 7px;
  --raio-pilula:999px;

  /* ── 2d. movimento (02 §6, F10) ───────────────────────────────────── */
  --m-entra:cubic-bezier(.23,1,.32,1);     /* entra ou reage (absorve --sair) */
  --m-anda:cubic-bezier(.77,0,.175,1);     /* desloca de A a B */
  --m-toque:120ms;    /* :active scale(.97) */
  --m-curto:200ms;    /* cor, opacidade, crossfade */
  --m-hover:260ms;    /* hover de botão/cartão — teto 300 ms */
  --m-medio:420ms;    /* nascer, acordeão, trilha */
  --m-apaga:700ms;    /* sair de cena, varrida do botão */
  --m-narra:1200ms;   /* entrada de bloco na LP */
  --m-hero:1600ms;    /* só a 1ª entrada do hero */

  /* ── 3. materiais ──────────────────────────────────────────────────
     Receitas sRGB com 5–6 paradas (sem degrau). #2A86C0 / rgb(42 134 192)
     é luz INTERNA da receita, sem token (02 §2.7). */
  --mat-mesh-vivo:
    radial-gradient(62% 52% at 20% 14%,rgb(42 134 192 / .46),rgb(42 134 192 / .34) 22%,rgb(42 134 192 / .19) 45%,rgb(42 134 192 / .09) 68%,rgb(42 134 192 / .02) 88%,transparent),
    radial-gradient(42% 36% at 82% 30%,rgb(62 155 211 / .26),rgb(62 155 211 / .17) 25%,rgb(62 155 211 / .08) 55%,rgb(62 155 211 / .02) 80%,transparent),
    radial-gradient(75% 62% at 92% 100%,rgb(13 37 51 / .85),rgb(13 37 51 / .62) 30%,rgb(13 37 51 / .30) 60%,rgb(13 37 51 / .08) 85%,transparent),
    radial-gradient(60% 48% at 0% 92%,rgb(14 61 89 / .80),rgb(14 61 89 / .55) 30%,rgb(14 61 89 / .26) 60%,rgb(14 61 89 / .07) 85%,transparent),
    #1C6794;
  --mat-mesh-noite:
    radial-gradient(70% 55% at 85% 0%,rgb(28 103 148 / .62),rgb(28 103 148 / .46) 22%,rgb(28 103 148 / .28) 45%,rgb(28 103 148 / .12) 68%,rgb(28 103 148 / .03) 88%,transparent),
    radial-gradient(40% 34% at 70% 18%,rgb(62 155 211 / .16),rgb(62 155 211 / .10) 30%,rgb(62 155 211 / .04) 65%,transparent),
    radial-gradient(55% 45% at 0% 100%,rgb(14 61 89 / .85),rgb(14 61 89 / .60) 30%,rgb(14 61 89 / .30) 60%,rgb(14 61 89 / .08) 85%,transparent),
    #0D2533;
  /* mesh-claro (novo v5, J-4): névoa .90 ↗, névoa .55 ↙, ouro .06 = luz de vela atrás do título.
     Nunca luz teal-vivo no campo de texto. */
  --mat-mesh-claro:
    radial-gradient(70% 55% at 100% 0%,rgb(207 227 234 / .90),rgb(207 227 234 / .70) 25%,rgb(207 227 234 / .42) 50%,rgb(207 227 234 / .16) 75%,rgb(207 227 234 / .04) 90%,transparent),
    radial-gradient(60% 50% at 0% 100%,rgb(207 227 234 / .55),rgb(207 227 234 / .42) 25%,rgb(207 227 234 / .25) 50%,rgb(207 227 234 / .10) 75%,rgb(207 227 234 / .02) 90%,transparent),
    radial-gradient(45% 40% at 28% 38%,rgb(217 174 76 / .06),rgb(217 174 76 / .045) 30%,rgb(217 174 76 / .025) 60%,rgb(217 174 76 / .008) 85%,transparent),
    #F2F5F7;
  /* pedra: veio oficial (marmore.svg, hash = acervo) sobre o degradê de mármore (FND:59-61) */
  --mat-pedra:
    url('../assets/texturas/marmore.svg') 0 0 / max(900px,100%) auto repeat-y,
    linear-gradient(155deg,#FBFAF7 0%,#F2F1EC 42%,#E8E7E1 78%,#F4F3EF 100%);
  /* papel: chão do claro (direção de João, 23/10: "off-white que remete ao mármore").
     Revisão do regente (23/10): o veio oficial (marmore.svg / marmore-1440.webp) é
     horizontal e, esticado como chão de página, lê como rastro de rolagem. Não há
     ativo de veio diagonal; gerar um seria imitação. Então: off-white quente da
     família pedra (#EDE8DF, João 23/10), liso, com uma luz mais clara no canto
     (sem névoa azul: com a base quente ela esverdeava), uma luz de ouro .06 e grão multiply .05. O mármore de verdade fica na estrutura Pedra. */
  --mat-papel:
    radial-gradient(70% 55% at 100% 0%,rgb(246 243 238 / .70),rgb(246 243 238 / .48) 30%,rgb(246 243 238 / .22) 60%,rgb(246 243 238 / .05) 85%,transparent),
    radial-gradient(45% 40% at 28% 30%,rgb(217 174 76 / .06),rgb(217 174 76 / .035) 40%,rgb(217 174 76 / .01) 75%,transparent),
    #EDE8DF;
  /* sinal e ouro: cor chapada de propósito (pausas) */
  --mat-sinal:#FFE556;
  --mat-ouro:#061016;
  /* luz de seção (faixa de fim / topo) */
  --mat-faixa-fim:radial-gradient(100% 140% at 80% 100%,#1C6794,#0E3D59 55%,#0D2533);

  /* grão: PNG branco com alfa (SC:437); a cor e a mistura vêm do modo */
  --grao:url('../assets/texturas/grao-220.png');
  --grao-fino:url('../assets/texturas/grao-160.png');

  /* sombra: só na tinta da marca, nunca preta (F16) */
  --tinta-sombra-escuro:rgb(6 30 46);   /* #061E2E */
  --tinta-sombra-claro:rgb(14 61 89);   /* teal-profundo */

  /* ── 4. semânticos — padrão do documento = escuro ──────────────── */
  color-scheme:dark;
}

/* ═══ 4. MODO ESCURO (família azul) — 02 §2 ═══════════════════════════ */
:root,[data-modo="escuro"],.estr-mesh,.estr-profundo,.estr-noite,.estr-ouro{
  color-scheme:dark;
  --fundo:#0D2533;                    /* o que a superfície pinta (estrutura troca por material) */
  --chao:#0D2533;
  --chao-alt:#0E3D59;
  --elevado:#0E334A;                  /* = profundo .6 sobre noite */
  --elevado-fio:rgb(207 227 234 / .16);
  --fundo-medida:#0D2533;             /* pior ponto do fundo, para o contraste impresso na página */

  --titulo:#FFFFFF;                   /* 15,79 noite · 11,47 profundo · 13,20 vidro B */
  --titulo-2:#FFE556;                 /* João 23/10: ênfase da marca, não cinza · 12,48 noite · 9,07 profundo (só ≥ 24 px; o título inteiro continua branco) */
  --corpo:#CFE3EA;                    /* 11,91 · 8,65 · 9,95 */
  --secundario:rgb(207 227 234 / .78);/* = #A4B9C2 sobre noite: 7,74 · 5,91 */
  --acento-texto:#FFE556;             /* rótulo, link, número pequeno: 12,48 · 9,07 */
  --acento-linha:#FFE556;             /* fio, borda, lábio */
  --acento-area:#FFE556;              /* botão, check, passo humano, grifo */
  --tinta-sobre-area:#0D2533;         /* texto sobre amarelo/ouro */
  --numero:#FFE556;                   /* João 23/10: um quente só por página — amarelo; ouro fica no material (botão, borda de luz) */
  --icone:#FFE556;
  --marcador:#FFE556;
  --fio:rgb(207 227 234 / .14);
  --fio-forte:rgb(207 227 234 / .28);
  --fio-informa:rgb(207 227 234 / .60); /* contorno que carrega informação ≥ 3 */
  --dg-forte:#FFE556;                 /* diagramas.css: aresta/anel que o argumento destaca · 12,48 noite · 9,07 profundo (o quente do escuro) */
  --erro:#FF6B66;
  --positivo:#84DAB0;
  --aviso-linha:#D9AE4C;
  --aviso-icone:#D9AE4C;
  --dado-1:#FFE556;
  --dado-2:#CFE3EA;
  --selecao-fundo:#FFE556; --selecao-tinta:#0D2533;

  /* foco (02 §2.4, F8): 2 px amarelo, deslocado 3 px — 12,48 noite · 4,86 vivo */
  --foco:#FFE556; --foco-largura:2px; --foco-desloc:3px;

  /* elevação (F16) */
  --sombra-1:0 2px 6px rgb(6 30 46 / .30),0 24px 60px -24px rgb(6 30 46 / .60);
  --sombra-2:0 2px 6px rgb(6 30 46 / .30),0 40px 80px -30px rgb(28 103 148 / .80);

  /* botão primário escuro: degradê oficial + varrida + brilho (um por tela) */
  --botao-fundo:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%);
  --botao-tinta:#0D2533;
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 -2px 0 rgb(120 80 10 / .25),0 10px 30px -8px rgb(255 214 80 / .45),0 0 0 1px rgb(255 229 86 / .35);
  --botao-sombra-hover:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -2px 0 rgb(120 80 10 / .25),0 18px 44px -10px rgb(255 214 80 / .6),0 0 0 1px rgb(255 229 86 / .5);
  --botao-varrida:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .65) 48%,transparent 62%);
  --botao-disco:transparent;
  --botao-disco-tinta:#0D2533;
  --botao-desab-fundo:rgb(207 227 234 / .12);
  --botao-desab-tinta:rgb(207 227 234 / .55);

  /* vidro B (SC:571-606; decisão 09/10) */
  --vidro-veu:linear-gradient(160deg,rgb(14 61 89 / .42),rgb(14 61 89 / .60));
  --vidro-ambar:linear-gradient(160deg,rgb(217 174 76 / .06),rgb(217 174 76 / 0) 55%);
  --vidro-ambar-mistura:soft-light;
  --vidro-grao:url('../assets/texturas/grao-160.png');
  --vidro-reflexo:rgb(255 255 255 / .16);
  --vidro-filtro:blur(28px) saturate(160%) brightness(.92);
  --vidro-filtro-celular:blur(16px) saturate(150%) brightness(.92);
  --vidro-borda:linear-gradient(135deg,rgb(255 255 255 / .6),rgb(255 255 255 / .12) 28%,rgb(255 255 255 / 0) 45%,rgb(217 174 76 / 0) 58%,rgb(217 174 76 / .6) 88%,rgb(255 229 86 / .7));
  --vidro-labios:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -1px 0 rgb(217 174 76 / .25),inset 0 18px 28px -22px rgb(255 255 255 / .18);
  --vidro-labios-hover:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(255 229 86 / .5),inset 0 18px 28px -22px rgb(255 255 255 / .24);
  --vidro-solido:rgb(14 61 89 / .95);   /* reduced-transparency */
  --vidro-contraste:rgb(14 61 89 / .78);/* prefers-contrast:more */
  --vidro-medida:#246A91;               /* pior ponto do vidro B sobre mesh, para contraste impresso */

  /* vidro leve de figura (.pil, MC:61-63) */
  --vidro-leve:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 40%),rgb(10 32 46 / .6);
  --vidro-leve-borda:rgb(255 255 255 / .14);

  /* nav "C" (SC:41-49) */
  --nav-veu:linear-gradient(135deg,rgb(28 103 148 / .30),rgb(13 37 51 / .55)),rgb(13 37 51 / .35);
  --nav-veu-compacta:linear-gradient(135deg,rgb(28 103 148 / .42),rgb(13 37 51 / .78)),rgb(13 37 51 / .35);
  --nav-filtro:blur(22px) saturate(170%);
  --nav-sombra:inset 0 1px 0 rgb(255 255 255 / .22),inset 0 0 0 1px rgb(217 174 76 / .28),0 18px 50px -20px rgb(6 30 46 / .6);
  --nav-link:#CFE3EA;
  --nav-link-ativo:#FFFFFF;
  --nav-num:#FFE556;
  --nav-hover:rgb(255 255 255 / .08);

  /* grão por modo */
  --grao-cor:#FFFFFF; --grao-alfa:.09; --grao-mistura:overlay;

  /* palco (moldura) */
  --palco-moldura:inset 0 0 0 1px rgb(217 174 76 / .25);
  --palco-sombra:0 2px 6px rgb(6 30 46 / .30),0 24px 60px -24px rgb(6 30 46 / .60);

  /* zebra / cabeçalho de tabela */
  --tabela-cab:rgb(28 103 148 / .25);
  --tabela-zebra:transparent;
  --tabela-rotulo:#FFE556;

  /* divisor da grade de propriedade */
  --divisor-propriedade:linear-gradient(transparent,#FFE556,transparent);

  /* painel: vidro B no escuro */
  --painel-fundo:linear-gradient(160deg,rgb(217 174 76 / .06),rgb(217 174 76 / 0) 55%),linear-gradient(160deg,rgb(14 61 89 / .42),rgb(14 61 89 / .60));
  --painel-grao:url('../assets/texturas/grao-160.png');
  --painel-reflexo:rgb(255 255 255 / .16);
  --painel-filtro:blur(28px) saturate(160%) brightness(.92);
  --painel-filtro-celular:blur(16px) saturate(150%) brightness(.92);
  --painel-borda:linear-gradient(135deg,rgb(255 255 255 / .6),rgb(255 255 255 / .12) 28%,rgb(255 255 255 / 0) 45%,rgb(217 174 76 / 0) 58%,rgb(217 174 76 / .6) 88%,rgb(255 229 86 / .7));
  --painel-labios:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -1px 0 rgb(217 174 76 / .25),inset 0 18px 28px -22px rgb(255 255 255 / .18);
  --painel-labios-hover:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(255 229 86 / .5),inset 0 18px 28px -22px rgb(255 255 255 / .24);
  --painel-solido:rgb(14 61 89 / .95);

  --botao-recuo:28px;
  --check-anel:rgb(255 229 86 / .35);
  --trilha-vazio:rgb(207 227 234 / .18);
  --trilha-feito:#D9AE4C;
  --trilha-atual-anel:transparent;
  --retorno:#F0D07A;
  --alerta-fundo:rgb(217 174 76 / .12);
  --limite-fundo:rgb(28 103 148 / .22);
  --limite-anel:rgb(217 174 76 / .25);
  --nao-risco:#FFE556;
  --icone-nao:#FFE556;
  --icone-disco:rgb(255 229 86 / .12);
  --icone-disco-anel:rgb(255 229 86 / .35);
  --divisor-propriedade-h:linear-gradient(90deg,transparent,#FFE556,transparent);
  --objeto-capa-sombra:inset 0 1px 0 rgb(255 255 255 / .18),inset -4px 0 0 rgb(6 16 22 / .25),0 18px 40px -18px rgb(6 30 46 / .7);
  --simbolo-capa:url('../assets/logo/simbolo-amarelo.svg');

  --acento-quente:#FFE556;            /* área quente: disco, selo, check, passo humano */
  --grifo-fio:transparent;
  --mat-modo:var(--mat-mesh-noite);   /* material de destaque do modo (hero) */
  --logo:url('../assets/logo/letreiro-branco.svg');
  --simbolo:url('../assets/logo/simbolo-amarelo.svg');
}

/* ═══ 4. MODO CLARO (off-white) — 02 §2 ═══════════════════════════════ */
[data-modo="claro"],.estr-papel,.estr-nevoa,.estr-pedra,.estr-sinal{
  color-scheme:light;
  --fundo:var(--mat-papel);          /* off-white quente + névoa + grão (João 23/10, revisão do regente) */
  --chao:#EDE8DF;
  --chao-alt:#CFE3EA;                 /* Névoa: colada ao off-white exige fio ou salto de escala */
  --elevado:#F6F3EE;                  /* placa off-white clara sobre o chão (João 23/10) */
  --elevado-fio:rgb(14 61 89 / .10);
  --fundo-medida:#E6E0D3;             /* pior ponto medido no render (chão #EDE8DF + grão) */

  --titulo:#0E3D59;                   /* 10,48 off-white · 11,47 branco · 8,65 névoa (J-2) */
  --titulo-2:#1C6794;                 /* teal-vivo é o protagonista do claro (João 23/10) */
  --corpo:#0E3D59;                    /* uma tinta só; hierarquia por tamanho e peso */
  --secundario:#475A65;               /* 6,57 · 7,20 · 5,42 */
  --acento-texto:#1C6794;             /* rótulo, link, número pequeno */
  --acento-linha:#1C6794;             /* João 23/10: fio no claro em teal-vivo (5,04); o quente do claro é só área amarela */
  --acento-area:#FFE556;              /* SÓ área: grifo, disco, selo, faixa de 4 px, check (F13) */
  --tinta-sobre-area:#061016;         /* 15,18 sobre amarelo */
  --numero:#1C6794;
  --icone:#1C6794;
  --marcador:#1C6794;
  --fio:rgb(28 103 148 / .18);        /* fio na família vivo: só separa área */
  --fio-forte:rgb(28 103 148 / .32);
  --fio-informa:#1C6794;              /* fio que informa = teal-vivo */
  --dg-forte:#0E3D59;                 /* diagramas.css: no claro a linha é vivo; a destacada sobe para profundo · 9,40 chão · 8,65 névoa · medido no veio da Pedra em 03-medicoes.md. Nunca amarelo/ouro como linha no claro */
  --erro:#B3261E;                     /* 5,97 · 6,54 · 4,93 */
  --positivo:#157347;                 /* 5,36 · 5,87 · 4,43 (névoa: só ≥ 18 px bold ou com ícone) */
  --aviso-linha:#D9AE4C;
  --aviso-icone:#1C6794;
  --dado-1:#1C6794;
  --dado-2:#0E3D59;
  --selecao-fundo:#FFE556; --selecao-tinta:#061016;

  --foco:#1C6794; --foco-largura:2px; --foco-desloc:3px;   /* 5,61 off-white · 4,63 névoa */

  --sombra-1:0 1px 2px rgb(14 61 89 / .06),0 12px 32px -16px rgb(14 61 89 / .18);
  --sombra-2:0 2px 6px rgb(14 61 89 / .08),0 32px 64px -28px rgb(14 61 89 / .28);

  /* botão primário claro (J-3): pílula profunda + disco amarelo com seta noite */
  --botao-fundo:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%); /* amarelo + ouro em todo o site (João 28/10) */
  --botao-tinta:#0D2533;
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 -2px 0 rgb(120 80 10 / .25),0 0 0 1px rgb(185 140 40 / .55),0 12px 28px -12px rgb(160 110 20 / .45);
  --botao-sombra-hover:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -2px 0 rgb(120 80 10 / .25),0 0 0 1px rgb(185 140 40 / .7),0 20px 40px -14px rgb(160 110 20 / .55);
  --botao-varrida:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .65) 48%,transparent 62%);
  --botao-disco:transparent;
  --botao-disco-tinta:#0D2533;
  --botao-desab-fundo:rgb(14 61 89 / .10);
  --botao-desab-tinta:rgb(14 61 89 / .50);

  /* vidro fosco claro, sem refração (F6) — só sobre material claro */
  --vidro-veu:linear-gradient(rgb(246 243 238 / .72),rgb(246 243 238 / .72));
  --vidro-ambar:linear-gradient(transparent,transparent);
  --vidro-ambar-mistura:normal;
  --vidro-grao:linear-gradient(transparent,transparent);
  --vidro-reflexo:transparent;
  --vidro-filtro:blur(24px) saturate(120%);
  --vidro-filtro-celular:blur(16px) saturate(120%);
  --vidro-borda:linear-gradient(rgb(14 61 89 / .12),rgb(14 61 89 / .12));
  --vidro-labios:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(217 174 76 / .35);
  --vidro-labios-hover:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 rgb(217 174 76 / .55);
  --vidro-solido:rgb(242 245 247 / .97);
  --vidro-contraste:#F6F3EE;
  --vidro-medida:#F1F0EB;

  --vidro-leve:linear-gradient(rgb(255 255 255 / .86),rgb(255 255 255 / .86));
  --vidro-leve-borda:rgb(14 61 89 / .12);

  --nav-veu:linear-gradient(rgb(246 243 238 / .80),rgb(246 243 238 / .80));
  --nav-veu-compacta:linear-gradient(rgb(246 243 238 / .92),rgb(246 243 238 / .92));
  --nav-filtro:blur(24px) saturate(120%);
  --nav-sombra:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 0 0 1px rgb(14 61 89 / .12),0 12px 32px -16px rgb(14 61 89 / .22);
  --nav-link:#0E3D59;
  --nav-link-ativo:#0E3D59;
  --nav-num:#1C6794;
  --nav-hover:rgb(28 103 148 / .09);

  --grao-cor:#0D2533; --grao-alfa:.05; --grao-mistura:multiply;

  --palco-moldura:inset 0 0 0 1px rgb(217 174 76 / .25);
  --palco-sombra:0 2px 6px rgb(14 61 89 / .08),0 32px 64px -28px rgb(14 61 89 / .28);

  --tabela-cab:rgb(28 103 148 / .08);
  --tabela-zebra:rgb(246 243 238 / 1);
  --tabela-rotulo:#1C6794;

  --divisor-propriedade:linear-gradient(transparent,#1C6794 30%,#D9AE4C 70%,transparent);

  /* painel: placa elevada no claro (vidro claro em off-white liso some) */
  --painel-fundo:linear-gradient(#F6F3EE,#F6F3EE);
  --painel-grao:linear-gradient(transparent,transparent);
  --painel-reflexo:transparent;
  --painel-filtro:none;
  --painel-filtro-celular:none;
  --painel-borda:linear-gradient(rgb(14 61 89 / .10),rgb(14 61 89 / .10));
  --painel-labios:inset 0 1px 0 rgb(255 255 255 / 1);
  --painel-labios-hover:inset 0 1px 0 rgb(255 255 255 / 1);
  --painel-solido:#F6F3EE;

  --botao-recuo:28px;
  --check-anel:rgb(217 174 76 / .9);
  --trilha-vazio:rgb(28 103 148 / .16);
  --trilha-feito:#1C6794;
  --trilha-atual-anel:rgb(217 174 76 / .9);
  --retorno:#475A65;
  --alerta-fundo:rgb(217 174 76 / .14);
  --limite-fundo:#F6F3EE;
  --limite-anel:rgb(14 61 89 / .12);
  --nao-risco:#1C6794;
  --icone-nao:#1C6794;
  --icone-disco:rgb(28 103 148 / .10);
  --icone-disco-anel:rgb(28 103 148 / .30);
  --divisor-propriedade-h:linear-gradient(90deg,transparent,#1C6794 30%,#D9AE4C 70%,transparent);
  --objeto-capa-sombra:inset 0 1px 0 rgb(255 255 255 / .18),inset -4px 0 0 rgb(6 16 22 / .25),0 18px 40px -18px rgb(14 61 89 / .55);
  --simbolo-capa:url('../assets/logo/simbolo-amarelo.svg');

  --acento-quente:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%); /* ouro + amarelo juntos, só como área */
  --grifo-fio:#D9AE4C;
  --mat-modo:var(--mat-papel);        /* hero claro = papel (João 23/10); Pedra cheia fica como estrutura */
  --logo:url('../assets/logo/letreiro-noite.svg');   /* J-6: noite até haver SVG profundo; nunca recolorir */
  --simbolo:url('../assets/logo/simbolo-noite.svg');
}

/* ═══ 5. ESTRUTURAS (02 §3.1) — sobre os semânticos do modo ═══════════ */
/* 1 · Mesh (escuro) — identidade. Corpo branco: apoio reprova no ponto claro (≈3,5). Amarelo só ≥ título ou área. */
.estr-mesh{
  --fundo:var(--mat-mesh-vivo); --fundo-medida:#2479AB;   /* pior ponto medido no render */
  --titulo:#FFFFFF; --titulo-2:#FFE556; --corpo:#FFFFFF; --secundario:#FFFFFF;
  --acento-texto:#FFFFFF; --numero:#FFE556; --icone:#FFE556; --marcador:#FFE556;
  --fio:rgb(255 255 255 / .24); --fio-forte:rgb(255 255 255 / .36);
  --foco:#FFE556;
  --logo:url('../assets/logo/letreiro-branco.svg');
}
/* 2 · Profundo (escuro) — bastidor, agente, divisória */
.estr-profundo{
  --fundo:#0E3D59; --chao:#0E3D59; --chao-alt:#0D2533; --fundo-medida:#0E3D59;
  --elevado:rgb(13 37 51 / .55);
  --fio:rgb(207 227 234 / .20);
  --erro:#FF6B66;  /* 4,12 sobre profundo: só ícone/fio; rótulo de erro fica branco */
  --logo:url('../assets/logo/letreiro-branco.svg');
}
/* 3 · Noite (escuro) — dado, diagnóstico, raio-x. Letreiro branco (era degradê). */
.estr-noite{
  --fundo:var(--mat-mesh-noite); --fundo-medida:#184F70;  /* pior ponto medido */
  --dado-1:#FFE556; --dado-2:#CFE3EA;
  --logo:url('../assets/logo/letreiro-branco.svg');
}
/* 4 · Ouro (pausa escura) — tese, citação, assinatura */
.estr-ouro{
  --fundo:var(--mat-ouro); --chao:#061016; --fundo-medida:#061016;
  --titulo:#F2F5F7; --titulo-2:#D9AE4C; --corpo:#CFE3EA;
  --acento-texto:#D9AE4C; --acento-linha:#D9AE4C; --numero:#D9AE4C; --icone:#D9AE4C; --marcador:#D9AE4C;
  --fio:rgb(217 174 76 / .45);
  --dg-forte:#D9AE4C;                 /* Ouro: o ouro é o único quente */
  --logo:url('../assets/logo/letreiro-degrade.svg');  /* degradê só se o ouro não estiver também em fio */
}
/* 5 · Papel (claro) — conteúdo, leitura. A4 impresso: branco */
.estr-papel{
  /* herda o chão papel do modo claro (off-white quente + veio) */
}
/* 6 · Névoa (claro) — método, condições, compromissos */
.estr-nevoa{
  --fundo:#CFE3EA; --chao:#CFE3EA; --chao-alt:#F2F5F7; --fundo-medida:#CFE3EA;
  --icone:#0E3D59; --fio:rgb(14 61 89 / .22);
  --tabela-zebra:rgb(255 255 255 / .35);
}
/* 6b · Névoa com material (mesh-claro) */
.estr-nevoa.jc-mesh--claro{ --fundo:var(--mat-mesh-claro); --fundo-medida:#D4E3E9; }
/* 7 · Pedra (claro, nova v5, J-4) — evidência, registro, hero claro editorial */
.estr-pedra{
  --fundo:var(--mat-pedra); --chao:#F2F1EC; --fundo-medida:#CAC9C4;  /* pior veio medido */
  --fio:rgb(14 61 89 / .16);
  /* medido no render: sobre o veio, vivo dá 3,71 e secundário 4,34. Texto pequeno
     direto no mármore vai em profundo (6,92, = --rot-pedra da v3); vivo só em
     título ≥ 24 px, ícone e área, ou dentro do vidro claro (5,39). */
  --secundario:#0E3D59; --acento-texto:#0E3D59;
}

/* 8 · Sinal (pausa neutra) — chamada, próximo passo, fecho */
.estr-sinal{
  --fundo:var(--mat-sinal); --chao:#FFE556; --fundo-medida:#FFE556;
  --titulo:#061016; --titulo-2:#0E3D59; --corpo:#0D2533; --secundario:#0D2533;
  --acento-texto:#0E3D59; --acento-area:#0E3D59; --acento-quente:#0E3D59; --tinta-sobre-area:#FFE556; --grifo-fio:transparent;
  --numero:#061016; --icone:#061016; --marcador:#061016;
  --fio:rgb(6 16 22 / .20); --fio-forte:rgb(6 16 22 / .32); --fio-informa:#061016; --dg-forte:#0E3D59;
  --foco:#061016;   /* 15,18 */
  --elevado:rgb(255 255 255 / .55);
  --logo:url('../assets/logo/letreiro-noite.svg');
}

/* ═══ 6. FORMATOS (TK:152-177 + correções 02 §2.6) ═══════════════════
   Em peça, os raios sobem ×1,25 e o A4 vai a mm. */
.fmt-post{--w:1080px;--h:1350px;--margem:88px;--topo:88px;--base:88px;--colunas:6;--gutter:24px;
  --t-display:132px;--t-h1:100px;--t-h2:68px;--t-numero:220px;--t-h3:42px;--t-lead:38px;--t-corpo:34px;--t-apoio:30px;--t-rotulo:24px;
  --raio-g:20px;--raio-g-j:20px 20px 20px 4px;--raio-painel:30px;--raio-painel-j:30px 30px 30px 7px;--raio-palco:40px;--raio-palco-j:40px 40px 40px 9px;--raio-p:5px;--raio-m:10px}
.fmt-story{--w:1080px;--h:1920px;--margem:72px;--topo:250px;--base:340px;--colunas:6;--gutter:24px;
  --t-display:136px;--t-h1:104px;--t-h2:70px;--t-numero:240px;--t-h3:44px;--t-lead:40px;--t-corpo:36px;--t-apoio:30px;--t-rotulo:24px;
  --raio-g:20px;--raio-g-j:20px 20px 20px 4px;--raio-painel:30px;--raio-painel-j:30px 30px 30px 7px;--raio-palco:40px;--raio-palco-j:40px 40px 40px 9px;--raio-p:5px;--raio-m:10px}
.fmt-slide{--w:1920px;--h:1080px;--margem:120px;--topo:96px;--base:96px;--colunas:12;--gutter:32px;
  --t-display:150px;--t-h1:104px;--t-h2:68px;--t-numero:240px;--t-h3:40px;--t-lead:38px;--t-corpo:32px;--t-apoio:26px;--t-rotulo:22px;
  --raio-g:20px;--raio-g-j:20px 20px 20px 4px;--raio-painel:30px;--raio-painel-j:30px 30px 30px 7px;--raio-palco:40px;--raio-palco-j:40px 40px 40px 9px;--raio-p:5px;--raio-m:10px}
.fmt-a4{--w:210mm;--h:297mm;--margem:18mm;--topo:20mm;--base:18mm;--colunas:12;--gutter:4mm;
  --t-display:46pt;--t-h1:32pt;--t-h2:20pt;--t-numero:64pt;--t-h3:12.5pt;--t-lead:12pt;--t-corpo:10.2pt;--t-apoio:8.6pt;--t-rotulo:7.6pt;--lh-corpo:1.5;
  --raio-p:1mm;--raio-m:2mm;--raio-g:3mm;--raio-g-j:3mm 3mm 3mm 1mm;--raio-painel:4mm;--raio-painel-j:4mm 4mm 4mm 1mm;--raio-palco:6mm;--raio-palco-j:6mm 6mm 6mm 1.5mm}
.fmt-a4.a4-corrido{--t-corpo:11pt}
@media print{
  /* impresso: chão branco e sem vidro (02 §4.2) */
  [data-modo="claro"],.estr-papel{--fundo:#FFFFFF;--chao:#FFFFFF}
}

/* ═══ 7. ALIASES LEGADOS (F1) ══════════════════════════════════════════
   legado: remover após migração. Mapeiam os 4 dialetos (01 §A.1) para os
   primitivos. Valores divergentes do legado (jc-paper-ink #304752,
   jc-support #E4F0F5, jc-light #F4F8FA, --txt-pedra #3C4C55, #E0EDF2)
   foram abolidos: o alias aponta para o token vigente. ATENÇÃO: o
   "--secundario" do kit (= #475A65) agora é semântico por modo; use
   --texto-secundario para o primitivo. */
:root{
  --vivo:var(--teal-vivo);          /* legado: remover após migração */
  --profundo:var(--teal-profundo);  /* legado */
  --noite:var(--teal-noite);        /* legado */
  --apoio:var(--apoio-claro);       /* legado */
  --sec:var(--texto-secundario);    /* legado */
  --sutil:var(--off-white);         /* legado */
  --superficie-sutil:var(--off-white); /* legado */
  --sair:var(--m-entra);            /* legado: absorvido por --m-entra */
  --display:var(--f-titulo);        /* legado (site.css) */
  --risco:var(--erro-claro);        /* legado (FND) */
  --ok:var(--positivo-claro);       /* legado (FND) */
  --sucesso:var(--positivo-claro);  /* legado (kit) */
  --num-vidro:var(--ouro-claro);    /* legado (FND) */
  --raio-peca:var(--raio-painel);   /* legado (kit) */
  --jc-teal:var(--teal-vivo);       /* legado (JC) */
  --jc-ink:var(--teal-profundo);    /* legado */
  --jc-gold:var(--ouro);            /* legado */
  --jc-yellow:var(--amarelo);       /* legado */
  --jc-light:var(--off-white);      /* legado: era #F4F8FA */
  --jc-support:var(--apoio-claro);  /* legado: era #E4F0F5 */
  --jc-paper-ink:var(--texto-secundario); /* legado: era #304752 */
  --jc-positive:var(--positivo-claro);    /* legado */
  --jc-positive-dark:var(--positivo-escuro); /* legado */
  --jc-negative:var(--erro-claro);  /* legado: era #A6251D */
  --jc-chat-bottom:var(--teal-noite); /* legado */
}