/* Slate Arctic — profundidade.
   Par neumórfico suave: a superfície fica exatamente entre a sombra escura e a clara.
   Embossed é text-shadow multicamada — nunca drop-shadow/filter. */
:root{
  /* ===== LEI DE ELEVAÇÃO — TRÊS DEGRAUS, UM MATERIAL =====
     Clay é o único material do sistema. Tudo que tem superfície usa um destes
     três degraus; não existe quarto valor, nem sombra escrita à mão.
       e0  base      — o plano da página. Sem sombra. Nada abaixo dele.
       e1  cartão    — o que se destaca do plano: card, botão, chip, painel.
       e2  sobreposição — o que flutua sobre tudo: modal, dropdown, toast, drawer.
     Estados intrínsecos (não são degraus): sunken para o que recebe entrada
     (campo, trilha, item ativo) e press para o toque.
     Fonte de luz única: luz em cima à esquerda, sombra embaixo à direita. */
  --e0:none; /* @kind shadow */
  --e1:var(--clay-drop-sm),var(--clay-inset-sm);
  --e1-hover:20px 20px 40px var(--clay-shadow),-10px -10px 26px var(--clay-glow),var(--clay-inset-sm);
  --e2:var(--clay-drop),var(--clay-inset);
  --e-sunken:inset 7px 7px 14px var(--clay-inner-dark),inset -7px -7px 14px var(--clay-inner-light);
  --e-sunken-sm:inset 4px 4px 9px var(--clay-inner-dark),inset -4px -4px 9px var(--clay-inner-light);
  --e-press:4px 4px 10px var(--clay-shadow),inset -4px -4px 9px var(--clay-inner-light),inset 5px 6px 12px var(--clay-inner-dark);
  /* Controle é pequeno: o lábio interno é fino (2px). O lábio de painel (7px)
     cobriria metade de um botão de 44px e apagaria a cor de acento. */
  --e1-ctrl:var(--clay-drop-sm),inset 2px 2px 5px rgba(255,255,255,.24),inset -2px -3px 6px rgba(6,10,20,.28);
  /* Botão de marca (04-09-2026): o mesmo lábio de controle mais um aro de 1px em crosslight,
     como na referência "Compliance". */
  --e1-brand:var(--clay-drop-sm),inset 0 0 0 1px color-mix(in srgb,var(--color-arctic-crosslight) 34%,transparent),inset 2px 2px 5px rgba(255,255,255,.24),inset -2px -3px 6px rgba(6,10,20,.28);
  --e1-brand-hover:16px 16px 32px var(--clay-shadow),-8px -8px 20px var(--clay-glow),inset 0 0 0 1px color-mix(in srgb,var(--color-arctic-crosslight) 40%,transparent),inset 2px 2px 5px rgba(255,255,255,.30),inset -2px -3px 6px rgba(6,10,20,.26);
  --e1-ctrl-hover:16px 16px 32px var(--clay-shadow),-8px -8px 20px var(--clay-glow),inset 2px 2px 5px rgba(255,255,255,.30),inset -2px -3px 6px rgba(6,10,20,.26);
  --e1-ctrl-surface:var(--clay-drop-sm),inset 2px 2px 5px var(--clay-inner-light),inset -2px -3px 6px var(--clay-inner-dark);
  --e-press-ctrl:3px 3px 8px var(--clay-shadow),inset -3px -3px 7px rgba(255,255,255,.18),inset 4px 5px 10px rgba(6,10,20,.34);

  /* Aliases de compatibilidade: as primitivas nomeiam "neu-*", o material é clay.
     Um único ponto de verdade — mudar aqui reilumina o produto inteiro. */
  --neu-raised:var(--e1);
  --neu-raised-hover:var(--e1-hover);
  --neu-raised-sm:var(--e1);
  --neu-chip:var(--e1);
  --neu-pressed:var(--e-sunken);
  --neu-pressed-sm:var(--e-sunken-sm);
  --neu-inset-input:var(--e-sunken);

  /* Sem consumidor medido em 2026-08-28 (`var(--glow-accent)` = 0 ocorrencias em
     components/, tokens/, templates/ e guidelines/). Fica com o valor historico; NAO
     e o anel de foco e NAO deve ser copiado para ele. */
  --glow-accent:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent); /* @kind shadow */
  /* ---- ANEL DE FOCO (lei 9) — DUAS CAMADAS, e cada numero abaixo foi medido ----
     HISTORICO EM DOIS DEGRAUS, os dois de 2026-08-28:
     (1) ate o item C5.1 o anel era `color-mix(var(--primary) 25%, transparent)`. Composto
         sobre o fundo, rendia 1,47:1 (escuro sobre --background-deep #0C1628), 1,49:1
         (escuro sobre --background #182038) e 1,31:1 (claro sobre #C8D4E8), contra os 3:1
         que a lei 20 exige em borda de controle. A varredura de alpha mostrou que NENHUM
         valor abaixo de 100% resolvia os DOIS temas (no claro, #44719f sobre #C8D4E8 so
         chega a 2,97:1 com alpha 90% e a 3,18:1 com 95%): o conserto era tirar o alpha.
     (2) solido a 3px o anel passou contra os fundos e SUMIU contra o preenchimento do
         proprio botao de acento — 1,00:1 no claro contra --primary-solid #44719f, que e a
         MESMA cor, e 1,67:1 no escuro contra #3E6FA8. Anel que so existe fora do controle
         nao marca o controle. Aquele RESIDUO estava declarado aqui como pendencia e e o que
         a decisao de 2026-08-28 (seguimento do C5.1) fecha, com anel de DUAS CAMADAS.

     DESENHO: camada INTERNA de 2px na cor da superficie (--background) e camada EXTERNA de
     2px no acento (--primary), escritas como `0 0 0 2px` + `0 0 0 4px`, o que deixa a banda
     de acento visivel entre 2px e 4px. A ORDEM E FUNCIONAL, nao estetica: em box-shadow a
     primeira sombra pinta POR CIMA, entao a interna precisa vir primeiro, senao a externa a
     cobre e o anel volta a ser de uma camada so. A interna separa o anel do PREENCHIMENTO;
     a externa separa o anel do FUNDO. Cada uma responde por uma adjacencia.

     MEDIDO (contraste WCAG 2.x, sRGB, sobre as cores compostas de cada tema):
       CAMADA EXTERNA (--primary) contra o fundo
         escuro #6496C8 sobre --background-deep #0C1628 5,80:1 · --background #182038 5,17:1
                              · --clay-surface #232c47 4,43:1
         claro  #44719f sobre --background-deep #C8D4E8 3,42:1 · --background #D2D6E2 3,52:1
                              · --clay-surface #e6e9f2 4,21:1
       CAMADA INTERNA (--background) contra o PREENCHIMENTO de acento
         escuro #182038 contra --primary-solid #3E6FA8 ......... 3,10:1
         claro  #D2D6E2 contra --primary-solid #44719f ......... 3,52:1
         mesmo eixo no destrutivo, que usa o mesmo anel:
         escuro #182038 contra --danger-solid #c2445f .......... 3,29:1
         claro  #D2D6E2 contra --danger-solid #b03a54 .......... 4,04:1

     POR QUE A INTERNA E --background E NAO --clay-surface, com o numero que decide: contra o
     preenchimento de acento no tema ESCURO, --clay-surface #232c47 mede 2,66:1 e REPROVA nos
     3:1; --background #182038 mede 3,10:1 e passa. No claro as duas passariam (4,21:1 e
     3,52:1), entao quem decide e o tema dificil. Custo aceito e medido: sobre uma superficie
     clay a camada interna fica visivel como um fio de 2px, a 1,17:1 no escuro e 1,20:1 no
     claro — diferenca de tom, nao de leitura, e ela e o preco de o anel ser um token unico
     em vez de um anel por superficie.
     RESIDUO DECLARADO que FICA, e este token sozinho nao resolve: sobre o botao de MARCA
     (--fontan-gradient-fill, radial de #4E628A a #2E3D5C, igual nos dois temas) a camada
     interna do tema escuro mede 2,64:1 no ponto mais claro do radial e 1,49:1 no mais
     escuro, abaixo de 3:1. O indicador NAO se perde, porque a camada externa segue a 5,17:1
     contra o fundo; o que e fraco ali e a separacao contra o preenchimento. Fechar isso
     exigiria anel por variante de botao, que um token unico nao faz.
     GEOMETRIA: 3px -> 4px de raio total. box-shadow NAO participa do layout, e isto foi
     MEDIDO em 2026-08-28 (Chrome headless, mesma pagina com as duas formas lado a lado):
     getBoundingClientRect 88,921875x44 identico, offset 89x44 identico, scrollWidth/Height
     do pai 89x44 identico e do body 756x392 identico. O que muda e o RECORTE, nao o
     tamanho: em recipiente com overflow o anel e cortado no limite do padding, e .arc-tabs
     tem padding var(--space-1) = 4px com overflow-x:auto — a folga vertical medida ali e de
     exatamente 4,00px em cima e 4,00px embaixo, logo o anel novo encosta no limite e a
     folga de 1px que existia com 3px deixa de existir.
     🔴 TOKEN COMPOSTO: ele usa var(), entao segue a armadilha documentada no bloco .dark
     abaixo e PRECISA ser redeclarado em cada escopo de tema. Esta declaracao vale para :root;
     .dark redeclara ao fim deste arquivo e .light redeclara em tokens/colors.css. */
  --focus-ring:0 0 0 2px var(--background),0 0 0 4px var(--primary); /* @kind shadow */
  /* 9.5 (04-09-2026): sobre o botao de marca (gradiente) a camada interna do anel comum media 1,49 a 2,64:1;
     o anel de marca usa --background-deep por dentro e crosslight por fora. */
  --focus-ring-brand:0 0 0 2px var(--background-deep),0 0 0 4px var(--primary); /* @kind shadow */
  /* No claro, crosslight (#C8D4E8) e o proprio --background-deep e sumiria contra o fundo (#D2D6E2, 1,07:1): a camada externa
     usa --primary (#44719f, 4,2:1 sobre --background); no escuro a camada externa e crosslight, como proposto em 9.5. */

  /* Overlays flutuantes usam drop-shadow tradicional, não relevo */
  --shadow-overlay:0 18px 48px rgba(6,10,20,.34);
  --shadow-popover:0 10px 28px rgba(6,10,20,.26);
  --shadow-tooltip:0 6px 18px rgba(6,10,20,.28);

  --emboss-basic:-1px -1px 1px rgba(255,255,255,.7),1px 1px 1px rgba(0,0,0,.12);
  --emboss-standard:-1px -1px 1px rgba(255,255,255,.75),1px 1px 1px rgba(0,0,0,.14),0 2px 3px rgba(42,54,80,.12);
  --emboss-premium:-1px -1px 1px rgba(255,255,255,.85),0 -1px 0 rgba(255,255,255,.5),1px 1px 1px rgba(0,0,0,.16),0 3px 5px rgba(42,54,80,.14);
  --emboss-ultra:-1px -1px 1px rgba(255,255,255,.9),0 -1px 0 rgba(255,255,255,.6),0 -2px 2px rgba(255,255,255,.35),1px 1px 1px rgba(0,0,0,.18),0 2px 3px rgba(42,54,80,.14),0 4px 8px rgba(42,54,80,.12),0 6px 14px rgba(42,54,80,.10),0 1px 0 rgba(255,255,255,.4);
  --chip-gradient:linear-gradient(145deg,var(--chip-from),var(--chip-to));

  /* ---- Lei da fonte de luz ----
     Uma única direção ilumina TODO o sistema: luz em cima à esquerda, sombra
     embaixo à direita. Emboss é aresta, não brilho: 1px de luz, 1px de sombra
     e uma difusão curta. Os offsets são iguais nos dois temas — só as cores
     invertem, o que mantém a mesma leitura de relevo no claro e no escuro. */
  --emboss-hi:rgba(255,255,255,.92);
  --emboss-lo:rgba(42,54,80,.30);
  --emboss-lo-soft:rgba(42,54,80,.18);

  /* ---- Clay · volume inflado (material padrão de superfície) ----
     PADRÃO DO PROJETO: clay para superfície de conteúdo, neumórfico para
     controle, embossed para texto. Suavidade é regra — o volume vem do
     tamanho da difusão, nunca do contraste das sombras. */
  --clay-surface:#e6e9f2;
  --clay-surface-2:#dfe3ee;
  --clay-inner-light:rgba(255,255,255,.78);
  --clay-inner-dark:rgba(42,54,80,.11);
  --clay-drop:24px 24px 52px rgba(42,54,80,.11),-12px -12px 34px rgba(255,255,255,.68);
  --clay-drop-sm:14px 14px 30px rgba(42,54,80,.10),-7px -7px 18px rgba(255,255,255,.62);
  --clay-inset:inset 7px 7px 15px var(--clay-inner-light),inset -7px -9px 17px var(--clay-inner-dark);
  --clay-inset-sm:inset 5px 5px 11px var(--clay-inner-light),inset -5px -6px 13px var(--clay-inner-dark);
  /* Raio: MUDOU DE ARQUIVO em 2026-08-28 (item C5.4). --clay-radius, --clay-radius-sm e
     --clay-radius-xs passaram a ser declarados em tokens/spacing.css, que e o arquivo de
     "espaco e forma" e ja era dono da familia --radius-*. Motivo: raio estava declarado em
     DOIS arquivos vivos da cascata ao mesmo tempo (spacing.css com --radius-*, 46 usos
     medidos; elevation.css com --clay-radius*, 37 usos medidos), e este aqui e o arquivo de
     PROFUNDIDADE. Os VALORES nao mudaram (24/16/10): a mudanca e de dono, nao de escala.
     Nao redeclare raio aqui. */
  --clay-shadow:rgba(42,54,80,.11);
  --clay-glow:rgba(255,255,255,.68);
}
.dark,[data-theme="dark"]{
  --emboss-basic:-1px -1px 1px rgba(255,255,255,.10),1px 1px 1px rgba(0,0,0,.35);
  --emboss-standard:-1px -1px 1px rgba(255,255,255,.12),1px 1px 1px rgba(0,0,0,.40),0 2px 3px rgba(0,0,0,.30);
  --emboss-premium:-1px -1px 1px rgba(255,255,255,.14),0 -1px 0 rgba(255,255,255,.08),1px 1px 1px rgba(0,0,0,.45),0 3px 5px rgba(0,0,0,.34);
  --emboss-ultra:-1px -1px 1px rgba(255,255,255,.16),0 -1px 0 rgba(255,255,255,.10),0 -2px 2px rgba(255,255,255,.06),1px 1px 1px rgba(0,0,0,.50),0 2px 3px rgba(0,0,0,.40),0 4px 8px rgba(0,0,0,.32),0 6px 14px rgba(0,0,0,.26),0 1px 0 rgba(0,0,0,.30);
  --shadow-overlay:0 18px 48px rgba(0,0,0,.55);
  --shadow-popover:0 10px 28px rgba(0,0,0,.45);
  --shadow-tooltip:0 6px 18px rgba(0,0,0,.45);

  --emboss-hi:rgba(200,212,232,.30);
  --emboss-lo:rgba(6,10,20,.68);
  --emboss-lo-soft:rgba(6,10,20,.42);

  --clay-surface:#232c47;
  --clay-surface-2:#1d2540;
  --clay-inner-light:rgba(200,212,232,.11);
  --clay-inner-dark:rgba(6,10,20,.42);
  --clay-drop:24px 24px 52px rgba(6,10,20,.42),-12px -12px 34px rgba(120,145,190,.05);
  --clay-drop-sm:14px 14px 30px rgba(6,10,20,.36),-7px -7px 18px rgba(120,145,190,.04);
  --clay-shadow:rgba(6,10,20,.40);
  --clay-glow:rgba(120,145,190,.06);

  /* ARMADILHA DO TOKEN COMPOSTO: um custom property que usa var() é resolvido
     no ESCOPO ONDE FOI DECLARADO e herdado já substituído. Redefinir só as
     primitivas aqui não muda `--e1` — ele desceria com os valores do claro
     (era a origem do halo branco nos cards em tema escuro). Todo token
     composto precisa ser redeclarado em cada escopo de tema. */
  --e1:var(--clay-drop-sm),var(--clay-inset-sm);
  --e1-hover:20px 20px 40px var(--clay-shadow),-10px -10px 26px var(--clay-glow),var(--clay-inset-sm);
  --e1-ctrl:var(--clay-drop-sm),inset 2px 2px 5px rgba(255,255,255,.14),inset -2px -3px 6px rgba(6,10,20,.46);
  --e1-brand:var(--clay-drop-sm),inset 0 0 0 1px color-mix(in srgb,var(--color-arctic-crosslight) 34%,transparent),inset 2px 2px 5px rgba(255,255,255,.14),inset -2px -3px 6px rgba(6,10,20,.46);
  --e1-brand-hover:16px 16px 32px var(--clay-shadow),-8px -8px 20px var(--clay-glow),inset 0 0 0 1px color-mix(in srgb,var(--color-arctic-crosslight) 40%,transparent),inset 2px 2px 5px rgba(255,255,255,.18),inset -2px -3px 6px rgba(6,10,20,.44);
  --e1-ctrl-hover:16px 16px 32px var(--clay-shadow),-8px -8px 20px var(--clay-glow),inset 2px 2px 5px rgba(255,255,255,.18),inset -2px -3px 6px rgba(6,10,20,.44);
  --e1-ctrl-surface:var(--clay-drop-sm),inset 2px 2px 5px var(--clay-inner-light),inset -2px -3px 6px var(--clay-inner-dark);
  --e-press-ctrl:3px 3px 8px var(--clay-shadow),inset -3px -3px 7px rgba(255,255,255,.10),inset 4px 5px 10px rgba(6,10,20,.52);
  --e2:var(--clay-drop),var(--clay-inset);
  --e-sunken:inset 7px 7px 14px var(--clay-inner-dark),inset -7px -7px 14px var(--clay-inner-light);
  --e-sunken-sm:inset 4px 4px 9px var(--clay-inner-dark),inset -4px -4px 9px var(--clay-inner-light);
  --e-press:4px 4px 10px var(--clay-shadow),inset -4px -4px 9px var(--clay-inner-light),inset 5px 6px 12px var(--clay-inner-dark);
  --clay-inset:inset 7px 7px 15px var(--clay-inner-light),inset -7px -9px 17px var(--clay-inner-dark);
  --clay-inset-sm:inset 5px 5px 11px var(--clay-inner-light),inset -5px -6px 13px var(--clay-inner-dark);
  --neu-raised:var(--e1);
  --neu-raised-hover:var(--e1-hover);
  --neu-raised-sm:var(--e1);
  --neu-chip:var(--e1);
  --neu-pressed:var(--e-sunken);
  --neu-pressed-sm:var(--e-sunken-sm);
  --neu-inset-input:var(--e-sunken);
  /* Anel de foco: composto (usa var(--primary) E var(--background)), logo redeclarado aqui
     pela mesma razao do bloco acima. Sem esta linha, uma pagina com .dark ANINHADO herdaria
     o anel ja substituido com os tokens do claro — o acento #44719f, que sobre #0C1628 mede
     1,30:1, e a camada interna #D2D6E2, que sobre um card escuro viraria um fio claro. Com
     duas camadas o token depende de DOIS tokens de tema, entao esta redeclaracao passou a
     ser duas vezes necessaria, nao uma. */
  --focus-ring:0 0 0 2px var(--background),0 0 0 4px var(--primary);
  --focus-ring-brand:0 0 0 2px var(--background-deep),0 0 0 4px var(--color-arctic-crosslight);
}