/* PCE — Contrato de design SPEC V2 (dois temas) — versão do app. (área de membros).
   Mesmo contrato do admin (docs/PCE-OS-Referencia-*-v2.html), com UMA adição própria
   do app: a Roda da Vida é um INSTRUMENTO CANÔNICO calibrado no escuro, então suas
   superfícies de entorno ficam escuras NOS DOIS TEMAS (escopo .atlas-roda). As cores
   das ÁREAS da Roda (var(--c) / hex de roda.js / canon do banco) são DOUTRINA e não
   passam por aqui — este arquivo só pinta o entorno.

   "TROCA DE VALORES, NÃO DE NOMES": nomes de token idênticos nos dois temas; o
   componente usa var(--token) cegamente. Fontes: Space Grotesk / IBM Plex Mono / Cinzel. */

/* ---- constantes ESCURAS imutáveis (fonte única dos literais escuros) ----
   servem à paleta escura E à Roda-instrumento, sem duplicar hex. */
:root{
  --d-shell:#070909; --d-surface:#0C1111; --d-surface2:#101817; --d-line:#182422; --d-line2:#213432; /* paleta A · Carbono (matiz 173°, sat baixa) — unifica raiz+app+entorno da Roda+admin+TSLs. Decisão Maick/Enrick (contra recomendação B do Diretor de Produto). */
  --d-ink:#EDE6D6; --d-muted:#A99B7E; --d-faint:#6E6350;
  --d-gold:#C8A24D; --d-gold-hi:#E5C96E; --d-gold-mid:#B8922A; --d-gold-lo:#8A5E12;
  --d-ok:#7FB08A; --d-watch:#E0B24E; --d-risk:#C56B4A;
  --d-gold-rgb:200,162,77; --d-ok-rgb:127,176,138; --d-watch-rgb:224,178,78; --d-risk-rgb:197,107,74;

  /* agnósticos (mesmo valor nos dois temas) */
  --foil:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 44%,var(--gold-lo) 100%);
  /* G2 · ouro FIXO para tudo que vive sobre superfície que fica ESCURA nos dois temas
     (barra de controles + painel Roda/figura/campo, e o disco escuro do joystick). O ouro
     que acompanha o tema (--gold*) escurece no claro e some sobre fundo escuro — o "dourado
     queimado". Estes -dk não variam. Fora dessas superfícies (ex.: cards claros do B5), o
     ouro segue o tema, que é o correto sobre creme. */
  --gold-hi-dk:var(--d-gold-hi); --gold-dk:var(--d-gold); --gold-lo-dk:var(--d-gold-lo);
  --gold-rgb-dk:var(--d-gold-rgb);
  --foil-dk:linear-gradient(135deg,var(--gold-hi-dk) 0%,var(--gold-dk) 44%,var(--gold-lo-dk) 100%);
  --shadow:0 20px 50px rgba(0,0,0,.5);   /* sombra de popup/modal — theme-blind, token único */
  --scrim:rgba(0,0,0,.55);               /* véu de modal — theme-blind */
  --disp:'Cinzel',serif; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* constantes de marca (não variam por tema) */
  --pce-teal-deep:#07211F; --pce-teal:#0F3D3E;
  /* Verde-musgo canônico: Malkut/Reino na Árvore da Vida. Também serve aos
     seletores de instrumento, sem substituir as cores semânticas das áreas. */
  --pce-moss:#5E6B34; --pce-moss-deep:#2F351A;
  --pce-teal-grad:linear-gradient(135deg,#07211F 0%,#0F3D3E 100%);
  --pce-tricolor:linear-gradient(90deg,#0F3D3E 0% 33%,#B0862F 33%,#E6C36A 66%,#12284A 66% 100%);
  /* avatar: teal da marca (escuro nos 2 temas). Inicial em --d-gold-hi fixo (#E5C96E,
     7,74:1 sobre o teal) — o --gold-hi variável reprovaria no claro (3,13:1). */
  --brand-teal:#113939; --brand-teal-lift:#2E6E64;
  /* INSÍGNIA DE MARCA (um tratamento único p/ todo selo do app: avatar + badges M).
     Teal da marca (escuro nos 2 temas) + borda ouro médio + numeral ouro-claro fixo
     (#E5C96E lê 7,74:1 sobre o teal). Substitui o dourado chapado (--foil) nas badges. */
  --seal-bg:var(--brand-teal); --seal-bd:var(--gold-mid); --seal-ink:var(--d-gold-hi);
  /* canal externo (WhatsApp) — única exceção ao ouro: codifica o CANAL, não estado */
  --wa:#25D366; --wa-ink:#062B14;
}

/* ---- ESCURO (default) = as constantes escuras ---- */
:root, [data-theme="dark"]{
  --shell:var(--d-shell); --surface:var(--d-surface); --surface2:var(--d-surface2);
  --line:var(--d-line); --line2:var(--d-line2);
  --ink:var(--d-ink); --muted:var(--d-muted); --faint:var(--d-faint);
  --gold:var(--d-gold); --gold-hi:var(--d-gold-hi); --gold-mid:var(--d-gold-mid); --gold-lo:var(--d-gold-lo);
  --ok:var(--d-ok); --watch:var(--d-watch); --risk:var(--d-risk);
  --gold-rgb:var(--d-gold-rgb); --ok-rgb:var(--d-ok-rgb); --watch-rgb:var(--d-watch-rgb); --risk-rgb:var(--d-risk-rgb);
  --halo:0 0 12px; --halo-a:.55;   /* regra #1 — glow */
  /* tinta sobre preenchido (foil): escura sobre foil claro no escuro */
  --btn-ink:#171106;
  /* TABELA CANÔNICA DE COR — fonte única: life_areas.color_hex do banco. Escuro = canônico.
     Serve bolinha dos 3 pontos, bolinha das 12 áreas, barra/bolinha das 7 inteligências,
     chips de legenda. NÃO altera cor no banco/roda.js — é a camada de apresentação do entorno. */
  --a1:#A855F7; --a2:#6366F1; --a3:#6366F1; --a4:#3B82F6; --a5:#3B82F6; --a6:#3B82F6;
  --a7:#10B981; --a8:#10B981; --a9:#F59E0B; --a10:#FF3D00; --a11:#F97316; --a12:#EF4444;
  --a-ink:#141005;   /* número dentro da bolinha (escuro sobre cor viva) */
  /* 7 inteligências (Espiritual = cor da área 1 que dá nome ao grupo — decisão consciente) */
  --i-espiritual:#A855F7; --i-social:#3B82F6; --i-emocional:#10B981; --i-intelectual:#F59E0B;
  --i-energetica:#FF3D00; --i-operacional:#F97316; --i-financeira:#EF4444;
}

/* ---- CLARO = espelho (branco tingido de ouro; ouro desce junto) ---- */
[data-theme="light"]{
  --shell:#F7F5F0; --surface:#FFFFFF; --surface2:#EFEBE1; --line:#E3DDCE; --line2:#CFC5AE;
  --ink:#262114; --muted:#5E5545; --faint:#92866F;
  --gold:#7A5F14; --gold-hi:#9C7A22; --gold-mid:#6B5210; --gold-lo:#4A3406;
  --ok:#3E6B4B; --watch:#7A5E12; --risk:#A3462A;
  --gold-rgb:122,95,20; --ok-rgb:62,107,75; --watch-rgb:122,94,18; --risk-rgb:163,70,42;
  --halo:0 0 0 3px; --halo-a:.16;   /* regra #1 — anel */
  /* tinta sobre preenchido: clara sobre foil escuro no claro (corrige M4/CTA apagados) */
  --btn-ink:#FBF7EC;
  /* claro = derivado (HSL do canônico, H/S idênticos, L baixado até ≥4,6 vs #FBF7EC e ≥4,5 vs #F7F5F0) */
  --a1:#9938F6; --a2:#5A5DF0; --a3:#5A5DF0; --a4:#1066F4; --a5:#1066F4; --a6:#1066F4;
  --a7:#0B8059; --a8:#0B8059; --a9:#9C6406; --a10:#D33300; --a11:#BB5005; --a12:#DF1313;
  --a-ink:#FBF7EC;   /* número dentro da bolinha (claro sobre cor derivada mid-escura) */
  --i-espiritual:#9938F6; --i-social:#1066F4; --i-emocional:#0B8059; --i-intelectual:#9C6406;
  --i-energetica:#D33300; --i-operacional:#BB5005; --i-financeira:#DF1313;
}

/* ---- A RODA É INSTRUMENTO: entorno SEMPRE ESCURO nos dois temas ----
   Só reaponta os tokens de ENTORNO para as constantes escuras. NÃO toca em cor de
   área (--c), nem em roda.js/roda.css. Garante fidelidade das cores canônicas e AA. */
.atlas-roda{
  --shell:var(--d-shell); --surface:var(--d-surface); --surface2:var(--d-surface2);
  --line:var(--d-line); --line2:var(--d-line2);
  --ink:var(--d-ink); --muted:var(--d-muted); --faint:var(--d-faint);
  --gold:var(--d-gold); --gold-hi:var(--d-gold-hi); --gold-mid:var(--d-gold-mid); --gold-lo:var(--d-gold-lo);
  --ok:var(--d-ok); --watch:var(--d-watch); --risk:var(--d-risk);
  --gold-rgb:var(--d-gold-rgb); --ok-rgb:var(--d-ok-rgb); --watch-rgb:var(--d-watch-rgb); --risk-rgb:var(--d-risk-rgb);
  --halo:0 0 12px; --halo-a:.55;
  /* rótulos que HERDAM color (.wt "Roda da Vida", .ac-name nomes de área) vinham da
     tinta do body — escura no claro, ilegível sobre a moldura escura. Fixa o off-white
     do instrumento nos DOIS temas. Não toca cor de área (--c/.ac-dot são canônicas). */
  color:var(--ink);
}

/* ---- AB1 · .pce-pill — a SUPERFÍCIE compartilhada (pílula flutuante em vidro) ----
   UMA declaração, duas consumidoras: a doca do Atlas (.doca-bar.docain, roda.css) e a
   tab bar das rotas de fora (.tabbar, app.css). Fonte única da aparência.

   COBRE SÓ SUPERFÍCIE: blur, borda, raio, sombra, padding — o IDIOMA da pílula.
   NÃO cobre FUNDO       — o fundo não é idioma de pílula, é sistema de TEMA. A doca é escura
                            porque o INSTRUMENTO é escuro (.atlas-roda reaponta os tokens); a tab
                            bar segue o tema porque o APP segue o tema. Coincidiam no escuro, mas
                            nunca foram a mesma regra — e as duas barras jamais dividem a tela (a
                            tab bar recolhe dentro do Atlas, a doca só existe dentro dele), então
                            a diferença de fundo é invisível por construção.
                            Decisão [SESSÃO · Enrick], opção (c). Ver C4.
   NÃO cobre LAYOUT      — a doca distribui 6 itens em flex, a tab bar 5 em grid.
   NÃO cobre ESTADO      — a doca marca o atual por aria-current, a tab bar por .active.
                            Decisão [MAICK via Enrick]: NÃO unificar (a doca está congelada,
                            e a extração tem de ser provadamente inerte para ela).
   NÃO cobre TRANSIÇÃO   — cada barra recolhe pelo seu próprio caminho.

   MORA AQUI porque este arquivo é o contrato de design, não pertence a nenhum instrumento,
   e CARREGA PRIMEIRO (index.html: tokens, depois roda.css, depois app.css) — assim as duas
   consumidoras sobrescrevem com a mesma especificidade, sem uma vencer a outra por ordem.
   SÓ MOBILE (≤820px): no desktop não existe barra de rodapé; nada daqui o alcança. */
@media(max-width:820px){
  .pce-pill{
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);   /* o VIDRO fica: é idioma da pílula, não fundo */
    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;
    padding:8px 8px 6px;
    box-shadow:0 18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  }
}