/* Slate Arctic — cor.
   Marca fixa nos dois temas (L1) + tokens semânticos por tema (L2).
   Valores da paleta de `biblioteca-ui-fontan`; claro é o modo padrão,
   escuro entra por `.dark` (ou `[data-theme="dark"]`) no elemento raiz. */

:root{
  /* 9.8 (decisao de 04-09-2026, registrada em DESIGN.md par. 7): opacidade dos dois brilhos decorativos da tela de acesso, por tema; medida por pixel
     (variacao de L* abaixo de 8 no pico e texto secundario >= 4,5:1 sobre o brilho). Claro 0,06/0,05; escuro 0,10/0,08. */
  --acesso-brilho-opacidade-marca:.06;
  --acesso-brilho-opacidade-ciano:.05;
  /* 3.1 e 3.9 (04-09-2026): --info-text, --success-text, --warning-text, --muted-foreground (claro) e
     --info-text, --danger-text (escuro) recalibrados a >= 4,5:1 sobre as superficies compostas declaradas;
     valores e medida em DESIGN.md par. 7 e docs/design/GABARITO-DESIGN-SYSTEM-E-RODADA-2026-08-28.md. */
  /* ---- L1 · marca Slate Arctic (não troca por tema) ---- */
  --color-arctic-deepnavy:#0C1628;
  --color-arctic-darkslate:#182038;
  --color-arctic-textdark:#2A3650;
  --color-arctic-mediumslate:#3E5680;
  --color-arctic-crossdark:#6880A8;
  --color-arctic-accent:#6496C8;
  --color-arctic-crosslight:#C8D4E8;
  --color-arctic-lightslate:#D2D6E2;

  /* Gradiente oficial da esfera FONTAN — do logotipo. Desde 04-09-2026 a mesma família
     de tons veste também o botão de marca, na versão de CONTROLE abaixo (decisão de 04-09-2026, registrada em DESIGN.md §7). */
  --fontan-gradient:radial-gradient(circle at 38% 33%,#6880A8 0%,#586E96 40%,#4A5E84 65%,#3E5680 100%); /* @kind other */
  /* Versão de PREENCHIMENTO do mesmo radial, aprofundada para o rótulo branco
     passar AA (6,1:1 no ponto mais claro). Mesma geometria, mesma família de
     matiz — só a luminância desce. O radial claro segue sendo só do logotipo. */
  --fontan-gradient-fill:radial-gradient(circle at 38% 33%,#4E628A 0%,#43567C 40%,#38496C 65%,#2E3D5C 100%); /* @kind other */ /* sem consumidor desde 04-09-2026; mantido até decisão do dono */
  /* Versão de CONTROLE da mesma família (botão de marca, decisão de 04-09-2026,
     referência: botão "Compliance", claro em cima e fundo embaixo). Só tons L1 já nomeados:
     crossdark #6880A8 no topo → mediumslate #3E5680 na base. Rótulo BRANCO medido por
     interpolação sRGB: 4,00:1 na borda superior (sem texto), 4,94:1 a 35 % da altura (topo
     das maiúsculas), 5,37:1 no meio, 7,37:1 na base — AA na zona do glifo. O rótulo slate
     da referência (#C8D4E8) mediria 3,30:1 a 35 % e foi recusado. */
  --fontan-gradient-control:linear-gradient(180deg,var(--color-arctic-crossdark) 0%,var(--color-arctic-mediumslate) 100%); /* @kind other */

  /* ---- L2 · claro (padrão) ---- */
  --background:#D2D6E2;
  --background-deep:#C8D4E8;
  --surface:#d6dae6;
  --surface-elevated:#eef1f7;
  --surface-sunken:#c9cedc;
  --card:#ffffff;
  --card-muted:#eef1f7;

  --foreground:#2A3650;
  --foreground-secondary:#3E5680;
  --muted-foreground:#4a5a76;
  /* Inerte: um degrau REAL abaixo do secundário, e uma superfície sem volume.
     Desabilitado não pode compartilhar fundo+sombra com nenhuma variante viva. */
  --foreground-disabled:#8d97a9;
  --surface-disabled:#dcdfe8;
  --border:rgba(42,54,80,.14);
  --border-strong:rgba(42,54,80,.28);
  --grid:rgba(42,54,80,.08);

  --primary:#44719f;
  --primary-foreground:#ffffff;
  --primary-hover:#3d6491;
  --primary-bg:color-mix(in srgb,#44719f 12%,transparent);
  /* Preenchimento sólido: sempre com texto BRANCO. Separado de --primary
     porque --primary também é cor de TEXTO sobre superfície, e as duas funções
     exigem luminâncias opostas para passar AA. */
  --primary-solid:#44719f;
  --primary-solid-hover:#3d6491;
  /* Acento como TEXTO sobre superfície (botão ghost, link em clay). */
  --primary-text:#3d6491;
  /* Destrutivo tem o mesmo par: --danger é traço/superfície, --danger-solid é
     preenchimento com rótulo branco. */
  --danger-solid:#b03a54;
  --danger-solid-hover:#9c3149;

  --success:#158a4c;--success-text:#11673d;--success-bg:color-mix(in srgb,#158a4c 15%,transparent);
  --warning:#96690c;--warning-text:#77530a;--warning-bg:color-mix(in srgb,#96690c 15%,transparent);
  --danger:#b52e4c;--danger-text:#9c2440;--danger-bg:color-mix(in srgb,#b52e4c 15%,transparent);
  --info:#4a7cae;--info-text:#395d87;--info-bg:color-mix(in srgb,#4a7cae 15%,transparent);

  --domain-cyan:#0d7fa0;--domain-green:#12805c;--domain-blue:#3d6491;
  --domain-violet:#6a51b8;--domain-amber:#99701c;--domain-rose:#b64560;

  --chart-1:#0d7fa0;--chart-2:#3d6491;--chart-3:#12805c;--chart-4:#99701c;
  --chart-5:#6a51b8;--chart-6:#b64560;--chart-7:#0f6f8a;--chart-8:#4a5e84;

  --kpi-1:#0d7fa0;--kpi-2:#3d6491;--kpi-3:#12805c;
  --kpi-4:#99701c;--kpi-5:#6a51b8;--kpi-6:#b64560;

  /* Par neumórfico do modo claro */
  --neu-dark:#c4c9d7;
  --neu-light:#e9edf5;
  --chip-from:#e2e6f0;
  --chip-to:#c9cedc;

  --overlay:rgba(42,54,80,.42);
  --skeleton:rgba(42,54,80,.09);
  --skeleton-sheen:rgba(42,54,80,.05);
}

/* Escopo claro explícito: permite uma ilha clara dentro de uma página `.dark`
   (cards de especificação, preview lado a lado). Mesmos valores de `:root`. */
.light{
  --acesso-brilho-opacidade-marca:.06;--acesso-brilho-opacidade-ciano:.05;
  --background:#D2D6E2;--background-deep:#C8D4E8;--surface:#d6dae6;--surface-elevated:#eef1f7;
  --surface-sunken:#c9cedc;--card:#ffffff;--card-muted:#eef1f7;
  --foreground:#2A3650;--foreground-secondary:#3E5680;--muted-foreground:#4a5a76;--foreground-disabled:#8d97a9;--surface-disabled:#dcdfe8;
  --border:rgba(42,54,80,.14);--border-strong:rgba(42,54,80,.28);--grid:rgba(42,54,80,.08);
  --primary:#44719f;--primary-foreground:#ffffff;--primary-hover:#3d6491;--primary-bg:color-mix(in srgb,#44719f 12%,transparent);--primary-solid:#44719f;--primary-solid-hover:#3d6491;--primary-text:#3d6491;--danger-solid:#b03a54;--danger-solid-hover:#9c3149;
  --success:#158a4c;--success-text:#11673d;--success-bg:color-mix(in srgb,#158a4c 15%,transparent);
  --warning:#96690c;--warning-text:#77530a;--warning-bg:color-mix(in srgb,#96690c 15%,transparent);
  --danger:#b52e4c;--danger-text:#9c2440;--danger-bg:color-mix(in srgb,#b52e4c 15%,transparent);
  --info:#4a7cae;--info-text:#395d87;--info-bg:color-mix(in srgb,#4a7cae 15%,transparent);
  --domain-cyan:#0d7fa0;--domain-green:#12805c;--domain-blue:#3d6491;
  --domain-violet:#6a51b8;--domain-amber:#99701c;--domain-rose:#b64560;
  --chart-1:#0d7fa0;--chart-2:#3d6491;--chart-3:#12805c;--chart-4:#99701c;
  --chart-5:#6a51b8;--chart-6:#b64560;--chart-7:#0f6f8a;--chart-8:#4a5e84;
  --kpi-1:#0d7fa0;--kpi-2:#3d6491;--kpi-3:#12805c;--kpi-4:#99701c;--kpi-5:#6a51b8;--kpi-6:#b64560;
  --neu-dark:#c4c9d7;--neu-light:#e9edf5;--chip-from:#e2e6f0;--chip-to:#c9cedc;
  --overlay:rgba(42,54,80,.42);--skeleton:rgba(42,54,80,.09);--skeleton-sheen:rgba(42,54,80,.05);
  --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-shadow:rgba(42,54,80,.11);--clay-glow:rgba(255,255,255,.68);
  /* Composto: precisa ser redeclarado no escopo, senão a ilha clara herda a
     substituição já feita no tema de fora. Ver a nota em tokens/elevation.css. */
  --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,.24),inset -2px -3px 6px rgba(6,10,20,.28);
  --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);
  --e2:var(--clay-drop),var(--clay-inset);
  --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);
  --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);
  --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);
  --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);
  --emboss-hi:rgba(255,255,255,.92);--emboss-lo:rgba(42,54,80,.30);--emboss-lo-soft:rgba(42,54,80,.18);
  --shadow-overlay:0 18px 48px rgba(42,54,80,.28);
  --shadow-popover:0 10px 28px rgba(42,54,80,.20);
  --shadow-tooltip:0 6px 18px rgba(42,54,80,.22);
  /* Anel de foco: token COMPOSTO de DUAS camadas, e agora depende de DOIS tokens de tema —
     var(--background) na camada interna e var(--primary) na externa. A ilha clara dentro de
     uma pagina `.dark` herdaria o anel ja substituido com os dois valores do ESCURO se ele
     nao fosse redeclarado aqui — mesma armadilha que a nota de tokens/elevation.css descreve
     para --e1, agora com duas dependencias em vez de uma. Valor, desenho e medicao de
     contraste: tokens/elevation.css, bloco do --focus-ring. */
  --focus-ring:0 0 0 2px var(--background),0 0 0 4px var(--primary);
}

.dark,[data-theme="dark"]{
  --acesso-brilho-opacidade-marca:.10;--acesso-brilho-opacidade-ciano:.08;
  --background:#182038;
  --background-deep:#0C1628;
  --surface:#1a2138;
  --surface-elevated:#242f4c;
  --surface-sunken:#161d32;
  --card:#1e2740;
  --card-muted:#242f4c;

  --foreground:#EAF0F8;
  --foreground-secondary:#c3d0e4;
  --muted-foreground:#8fa0bd;
  --foreground-disabled:#5d6883;
  --surface-disabled:#1e2540;
  --border:rgba(200,212,232,.14);
  --border-strong:rgba(200,212,232,.30);
  --grid:rgba(200,212,232,.09);

  --primary:#6496C8;
  --primary-foreground:#ffffff;
  --primary-hover:#7aa8d6;
  --primary-bg:color-mix(in srgb,#6496C8 16%,transparent);
  /* No escuro o acento de TEXTO precisa ser claro (#6496C8) e o de
     PREENCHIMENTO precisa ser mais fundo, para o rótulo branco passar AA.
     Texto de botão cheio nunca é escuro — isso lê como desabilitado. */
  --primary-solid:#3E6FA8;
  --primary-solid-hover:#4C82BD;
  --primary-text:#8ab2dc;
  --danger-solid:#c2445f;
  --danger-solid-hover:#d2536e;

  --success:#37d67a;--success-text:#37d67a;--success-bg:color-mix(in srgb,#37d67a 15%,transparent);
  --warning:#fab219;--warning-text:#fab219;--warning-bg:color-mix(in srgb,#fab219 15%,transparent);
  --danger:#e0607a;--danger-text:#ee8ca0;--danger-bg:color-mix(in srgb,#e0607a 15%,transparent);
  --info:#6496C8;--info-text:#8ab2dc;--info-bg:color-mix(in srgb,#6496C8 15%,transparent);

  --domain-cyan:#1aa3c8;--domain-green:#1fb07a;--domain-blue:#6496C8;
  --domain-violet:#8a6fd6;--domain-amber:#e0a83c;--domain-rose:#e0607a;

  --chart-1:#1aa3c8;--chart-2:#6496C8;--chart-3:#1fb07a;--chart-4:#e0a83c;
  --chart-5:#8a6fd6;--chart-6:#e0607a;--chart-7:#2ec5d8;--chart-8:#6880A8;

  --kpi-1:#1aa3c8;--kpi-2:#6496C8;--kpi-3:#1fb07a;
  --kpi-4:#e0a83c;--kpi-5:#8a6fd6;--kpi-6:#e0607a;

  --neu-dark:#151b2f;
  --neu-light:#1f2842;
  --chip-from:#1e2740;
  --chip-to:#161d32;

  --overlay:rgba(6,10,20,.60);
  --skeleton:rgba(200,212,232,.07);
  --skeleton-sheen:rgba(200,212,232,.13);
}