/* ============================================================================
   lig-theme.css — LIG UI sobre frappe-ui 1.0.0-beta.7 (LMS v2.58.1)
   ----------------------------------------------------------------------------
   Fonte da identidade: brandbook LIG System v4B (cores TRAVADAS).
   Doc-mãe: plataforma-frappe/05-lig-ui-design-system.md (workspace).
   Mecanismo: os utilitários do frappe-ui leem CSS custom properties em
   RUNTIME (color-mix(var(--token))) — este arquivo, carregado DEPOIS do
   bundle, re-tematiza o portal inteiro sem rebuild do frontend.
   Injeção no SPA: <link> adicionado em lms/www/_lms.html na camada de build
   da imagem (ver lig_lms/.github/workflows/build-image.yml e OVERRIDES.md).
   Regra: NUNCA editar frappe-ui/lms — só overrides aqui.
   ============================================================================ */

/* ── Fontes (self-hosted, assets deste app — nunca Google Fonts no portal) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/lig_lms/fonts/SpaceGrotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/lig_lms/fonts/JetBrainsMono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ── Paleta LIG (referência; travada no brandbook v4B) ── */
:root {
  --lig-black: #000000;
  --lig-surface: #101014;
  --lig-surface-2: #1a1a22;
  --lig-border-solid: #2a2a35;
  --lig-text: #ffffff;
  --lig-text-2: #c9c4d4;
  --lig-text-3: #5a5a66;
  --lig-action: #e85da4;
  --lig-action-hover: #d14690;
  --lig-magenta: #b02069;
  --lig-purple: #7e2e93;
  --lig-lime: #90fc18;
  --lig-lime-dark: #609c0c;
  --lig-teal: #009c6c;
  --lig-warn: #fcd860;
  --lig-gradient: linear-gradient(180deg, #c22a6e 0%, #7e2e93 100%);
  --hairline-1: rgba(255, 255, 255, 0.06);
  --hairline-2: rgba(255, 255, 255, 0.09);
  --hairline-3: rgba(255, 255, 255, 0.16);
  --glow-pink: 0 0 24px rgba(232, 93, 164, 0.28);
  --ease-swift: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Raio (tokens do frappe-ui; vale p/ os 2 temas) ─────────────────────────
   Escala LIG: 6/10/14/20. `rounded` default (radius-4) = 10px (botões/inputs);
   cards `rounded-lg` = 14px. */
:root {
  --radius-4: 10px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 20px;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA ESCURO = O TEMA LIG (padrão do portal; default forçado na injeção)
   Mapeamento token semântico frappe-ui → LIG. Escala cinza com tinta roxa.
   DARK-ONLY (decisão 16/07/2026): o tema claro ESPELHA o escuro — o toggle
   do usuário não tira o aluno da marca. Tema claro LIG real = backlog.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme='dark'],
[data-theme='light'] {
  color-scheme: dark;

  /* Superfícies — escada de elevação LIG: canvas → surface → surface-2 → lift */
  --surface-base: #000000;
  --surface-gray-1: #101014;
  --surface-gray-2: #1a1a22;
  --surface-gray-3: #24242e;
  --surface-gray-4: #2e2e3a;
  --surface-gray-5: #3a3a47;
  --surface-gray-6: #4a4a58;
  --surface-gray-7: #5a5a66;
  --surface-gray-8: #b02069;   /* estado :active do botão sólido → magenta   */
  --surface-gray-9: #d14690;   /* hover do botão sólido / seleção → action-hover */
  --surface-gray-10: #e85da4;  /* BOTÃO SÓLIDO / superfícies invertidas → action */
  --surface-sidebar: #101014;
  --surface-elevation-1: #101014;
  --surface-elevation-2: #1a1a22;
  --surface-elevation-3: #24242e;
  --surface-alpha-base: rgba(0, 0, 0, 0.75); /* backdrop de modais (blur no brandbook) */

  /* Tinta (texto/ícones) */
  --ink-base: #000000;         /* texto sobre action/lime/teal (botões sólidos) */
  --ink-gray-1: #1a1a22;
  --ink-gray-2: #2a2a35;
  --ink-gray-3: #3a3a47;
  --ink-gray-4: #5a5a66;       /* desabilitado / terciário → lig-text-3 */
  --ink-gray-5: #6e6e7e;
  --ink-gray-6: #8b8797;
  --ink-gray-7: #c9c4d4;       /* corpo → lig-text-2 */
  --ink-gray-8: #e4e1ec;
  --ink-gray-9: #ffffff;       /* títulos → lig-text */
  --ink-blue-link: #e85da4;    /* links = action */

  /* Bordas — hairlines brancas em alpha (nunca cinza sólido) */
  --outline-base: rgba(255, 255, 255, 0.09);
  --outline-gray-1: rgba(255, 255, 255, 0.06);
  --outline-gray-2: rgba(255, 255, 255, 0.09);
  --outline-gray-3: rgba(255, 255, 255, 0.16);
  --outline-gray-4: rgba(255, 255, 255, 0.16);
  --outline-gray-5: #2a2a35;
  --outline-gray-6: #3a3a47;
  --outline-gray-7: #5a5a66;
  --outline-gray-8: #c9c4d4;
  --outline-gray-9: #ffffff;
  --outline-elevation-1: rgba(255, 255, 255, 0.06);
  --outline-elevation-2: rgba(255, 255, 255, 0.09);

  /* Semântica de sucesso → teal LIG (steps usados pelo LMS: 1-3, inks 3/5/6) */
  --surface-green-1: rgba(0, 156, 108, 0.08);
  --surface-green-2: rgba(0, 156, 108, 0.15);
  --surface-green-3: #009c6c;
  --outline-green-1: rgba(0, 156, 108, 0.25);
  --outline-green-2: rgba(0, 156, 108, 0.35);
  --outline-green-3: rgba(0, 156, 108, 0.4);
  --ink-green-3: #2dd4a7;
  --ink-green-5: #4be3b9;
  --ink-green-6: #7deccd;
  /* teal/cyan do preset → mesmo teal LIG (badges/estados esporádicos) */
  --surface-teal-2: rgba(0, 156, 108, 0.15);
  --surface-teal-3: #009c6c;
  --ink-teal-3: #2dd4a7;
  --outline-teal-2: rgba(0, 156, 108, 0.35);
  --surface-cyan-2: rgba(0, 156, 108, 0.15);
  --surface-cyan-3: #009c6c;
  --ink-cyan-3: #2dd4a7;
  --outline-cyan-2: rgba(0, 156, 108, 0.35);

  /* Semântica de atenção → warn LIG (amber/yellow/orange, steps usados 1-3, 5-6) */
  --surface-amber-1: rgba(252, 216, 96, 0.08);
  --surface-amber-2: rgba(252, 216, 96, 0.14);
  --surface-amber-3: #fcd860;
  --surface-yellow-1: rgba(252, 216, 96, 0.08);
  --surface-yellow-2: rgba(252, 216, 96, 0.14);
  --surface-yellow-3: #fcd860;
  --surface-orange-1: rgba(252, 216, 96, 0.08);
  --surface-orange-2: rgba(252, 216, 96, 0.14);
  --surface-orange-3: #fcd860;
  --ink-amber-3: #fcd860;
  --ink-amber-5: #fcd860;
  --ink-amber-6: #fde48a;
  --ink-yellow-3: #fcd860;
  --ink-orange-3: #fcd860;
  --ink-orange-5: #fcd860;
  --ink-orange-6: #fde48a;
  --outline-amber-1: rgba(252, 216, 96, 0.25);
  --outline-amber-2: rgba(252, 216, 96, 0.4);
  --outline-yellow-2: rgba(252, 216, 96, 0.4);
  --outline-orange-1: rgba(252, 216, 96, 0.25);
  --outline-orange-2: rgba(252, 216, 96, 0.4);
  /* Vermelho/destrutivo FICA vermelho (decisão 16/07: distinguir da ação primária) */

  /* Famílias de marca → ramp LIG */
  --surface-pink-3: #e85da4;
  --ink-pink-3: #f49bc9;
  --outline-pink-2: rgba(232, 93, 164, 0.4);
  --surface-violet-3: #7e2e93;
  --surface-purple-3: #7e2e93;
  --ink-violet-3: #b07ec4;

  /* AZUL → AÇÃO (a LIG não usa azul; botões/infos azuis do LMS viram action)
     Semânticos: */
  --surface-blue-1: rgba(232, 93, 164, 0.1);
  --surface-blue-2: rgba(232, 93, 164, 0.15);
  --surface-blue-3: #d14690;
  --surface-blue-4: #b02069;
  --surface-blue-5: #d14690;
  --surface-blue-6: #e85da4;
  --surface-blue-7: #d14690;
  --surface-blue-8: #b02069;
  --surface-blue-9: #f49bc9;
  --surface-blue-10: #f8b7d8;
  --ink-blue-1: rgba(232, 93, 164, 0.2);
  --ink-blue-2: rgba(232, 93, 164, 0.35);
  --ink-blue-3: #b02069;
  --ink-blue-4: #d14690;
  --ink-blue-5: #e85da4;
  --ink-blue-6: #f49bc9;
  --ink-blue-7: #f49bc9;
  --ink-blue-8: #f6aed2;
  --ink-blue-9: #f8c3dd;
  --ink-blue-10: #fbd9e9;
  --outline-blue-1: rgba(232, 93, 164, 0.3);
  --outline-blue-2: rgba(232, 93, 164, 0.4);
  --outline-blue-3: rgba(232, 93, 164, 0.5);
  --outline-blue-4: rgba(232, 93, 164, 0.6);
  --outline-blue-5: #b02069;
  --outline-blue-6: #d14690;
  --outline-blue-7: #e85da4;
  --outline-blue-8: #f49bc9;
  --outline-blue-9: #f6aed2;
  --outline-blue-10: #fbd9e9;
  /* Alertas (chips de alert do frappe-ui): info→marca, success→teal, warning→warn;
     error permanece vermelho (decisão destrutivo ≠ ação) */
  --surface-alert-button-info: #b02069;
  --ink-alert-button-info: #f8b7d8;
  --surface-alert-button-success: rgba(0, 156, 108, 0.25);
  --ink-alert-button-success: #2dd4a7;
  --surface-alert-button-warning: rgba(252, 216, 96, 0.18);
  --ink-alert-button-warning: #fcd860;
  --surface-alert-button-default: #24242e;
  --ink-alert-button-default: #ffffff;
  /* Cruas (classes bg-blue-500 etc. do Button solid azul): */
  --blue-100: rgba(232, 93, 164, 0.12);
  --blue-200: rgba(232, 93, 164, 0.2);
  --blue-300: #f49bc9;
  --blue-400: #e85da4;
  --blue-500: #e85da4;
  --blue-600: #d14690;
  --blue-700: #b02069;
  --blue-800: #b02069;
  --blue-900: #7e2e93;
  --focus-blue: 0px 0px 0px 2px #000000, 0px 0px 0px 4px #e85da4;

  /* Foco — anel action com offset preto (nunca remover foco visível) */
  --focus-default: 0px 0px 0px 2px #000000, 0px 0px 0px 4px #e85da4;
  --focus-outline-default: 2px solid #e85da4;

  /* Elevação — proibido sombra cinza borrada: anel hairline no lugar */
  --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --elevation-base: 0 0 0 1px rgba(255, 255, 255, 0.09);
  --elevation-md: 0 0 0 1px rgba(255, 255, 255, 0.09);
  --elevation-lg: 0 0 0 1px rgba(255, 255, 255, 0.16);
  --elevation-xl: 0 0 0 1px rgba(255, 255, 255, 0.16);
  --elevation-2xl: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ── Regras globais do tema (dark = light: dark-only) ── */
[data-theme='dark'] ::selection,
[data-theme='light'] ::selection {
  background: #e85da4;
  color: #000;
}
[data-theme='dark'] img,
[data-theme='light'] img {
  filter: none; /* o preset escurece imagens (brightness .8) — LIG quer thumbnails nítidas */
}
[data-theme='dark'] :where(a:not([class])),
[data-theme='light'] :where(a:not([class])) {
  color: #e85da4;
}
[data-theme='dark'] :where(a:not([class]):hover),
[data-theme='light'] :where(a:not([class]):hover) {
  color: #f49bc9;
}

/* Tipografia display — Space Grotesk 500 em títulos (Inter continua no corpo,
   já servida pelo frappe-ui como InterVar) */
[data-theme='dark'] :where(h1, h2, h3, h4),
[data-theme='light'] :where(h1, h2, h3, h4) {
  font-family: 'Space Grotesk', InterVar, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Números tabulares em métricas/progresso (regra do brandbook §04) */
[data-theme='dark'] :where([class*='font-mono']),
[data-theme='light'] :where([class*='font-mono']) {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'zero' 1;
  font-variant-numeric: tabular-nums;
}

/* ── Utilitários LIG (para componentes próprios — doc 05 §3) ── */

/* FigLabel — eyebrow mono com hairline */
.lig-fig {
  font: 500 12px 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e85da4;
  display: flex;
  align-items: center;
  gap: 12px;
  font-feature-settings: 'zero' 1;
}
.lig-fig::after {
  content: '';
  height: 1px;
  flex: 0 0 64px;
  background: rgba(255, 255, 255, 0.16);
}

/* Momento-clímax (lime — máx. 1 por página; ex.: turma concluída) */
.lig-climax {
  background: #90fc18;
  color: #000;
}
.lig-climax:hover {
  background: #609c0c;
  box-shadow: 0 0 24px rgba(144, 252, 24, 0.25);
}

/* Gradiente de marca (hero, conclusão, certificado) */
.lig-gradient {
  background: linear-gradient(180deg, #c22a6e 0%, #7e2e93 100%);
}

/* Border-beam (máx. 1 por página — card-chave do dashboard).
   Sem @property (animação de custom property falha fora do Chromium): um
   quadrado conic oversized gira via transform atrás de um ::after interno. */
.lig-beam {
  position: relative;
  border-radius: 14px;
  background: #101014;
  overflow: hidden;
}
.lig-beam::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(220%, 260px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(transparent 0 82%, #c22a6e 88%, #e85da4 92%, #7e2e93 96%, transparent 100%);
  animation: lig-beam 6s linear infinite;
  pointer-events: none;
}
.lig-beam::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: #101014;
  pointer-events: none;
}
.lig-beam > * {
  position: relative;
  z-index: 1;
}
@keyframes lig-beam {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@supports not (background: conic-gradient(from 0deg, #000, #fff)) {
  .lig-beam::before {
    display: none;
  }
}

/* ── Aula: leitura confortável (lição LearnHouse — coluna de conteúdo centrada,
   prosa generosa). Seletor estrutural do Lesson.vue (combo único no v2.58.1;
   registrado em OVERRIDES.md — revalidar em upgrade). ── */
[data-theme='dark'] .border-e.pt-5.pb-10 > .px-5,
[data-theme='light'] .border-e.pt-5.pb-10 > .px-5 {
  max-width: 800px;
  margin-inline: auto;
}
[data-theme='dark'] .bn-editor.prose,
[data-theme='light'] .bn-editor.prose {
  font-size: 15.5px;
  line-height: 1.75;
}

/* ── 404 do SPA: o router v2.58.1 não tem rota catch-all e o wrapper de
   conteúdo fica vazio (tela preta). Paliativo por CSS até o PR upstream:
   mensagem no pseudo-elemento do wrapper :empty (registrado em OVERRIDES.md). ── */
[data-theme='dark'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*)),
[data-theme='light'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*)) {
  align-items: center;
  justify-content: center;
  gap: 8px;
}
[data-theme='dark'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*))::before,
[data-theme='light'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*))::before {
  content: 'Página não encontrada';
  font-family: 'Space Grotesk', InterVar, sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: #fff;
}
[data-theme='dark'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*))::after,
[data-theme='light'] .flex-1.flex.flex-col.h-full.overflow-auto.bg-surface-base:not(:has(*))::after {
  content: 'O link pode ter mudado. Use o menu ao lado para voltar ao Início.';
  font-size: 13.5px;
  color: #c9c4d4;
}

/* ── Abas da turma (BatchDetail.vue): labels hardcoded sem __() no v2.58.1 —
   swap visual por posição (ordem 1-5 é idêntica p/ aluno, guest e admin; a 6ª
   "Settings" é admin-only e fica de fora). Paliativo até PR upstream; o hash
   de navegação continua usando o label interno. Registro em OVERRIDES.md. ── */
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(-n + 5) {
  font-size: 0;
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(-n + 5)::after {
  font-size: 14px;
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(1)::after {
  content: 'Visão geral';
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(2)::after {
  content: 'Painel';
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(3)::after {
  content: 'Aulas ao vivo';
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(4)::after {
  content: 'Avisos';
}
[role='tablist']:has(button[role='tab']:nth-of-type(5)):has(svg.lucide-list-icon) > button[role='tab']:nth-of-type(5)::after {
  content: 'Discussões';
}

/* Gráficos: o LMS usa ECharts (canvas) sem passar cores — retema exige PR
   upstream (colors no config + __() nos títulos). Aceito azul na página
   Estatísticas (admin-only) até lá. Registro: STATUS.md 16/07. */

/* Barras de rolagem discretas (toolbars de editor exibiam trilho claro) */
[data-theme='dark'] ::-webkit-scrollbar,
[data-theme='light'] ::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
[data-theme='dark'] ::-webkit-scrollbar-track,
[data-theme='light'] ::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme='dark'] ::-webkit-scrollbar-thumb,
[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: #2a2a35;
  border-radius: 999px;
}
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover,
[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: #3a3a47;
}
[data-theme='dark'] *,
[data-theme='light'] * {
  scrollbar-width: thin;
  scrollbar-color: #2a2a35 transparent;
}

/* ── Login clássico (/login, /update-password — páginas website, fora do SPA;
     sem [data-theme], por isso escopo próprio via data-path/page-card) ── */
body[data-path='login'],
body[data-path='update-password'] {
  background: #000;
  color: #c9c4d4;
  color-scheme: dark;
  position: relative;
}
/* Glow ambiente no topo (gabarito Plat2 — login) */
body[data-path='login']::before,
body[data-path='update-password']::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 380px;
  background: radial-gradient(600px 380px at 50% 0%, rgba(194, 42, 110, 0.16), transparent 70%);
  pointer-events: none;
}
body[data-path='login'] .page-card,
body[data-path='update-password'] .page-card {
  background: #101014;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  border: none;
}
body[data-path='login'] .page-card-head-text,
body[data-path='login'] h4,
body[data-path='update-password'] h4 {
  color: #fff;
  font-family: 'Space Grotesk', InterVar, sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}
body[data-path='login'] .page-card-subtitle,
body[data-path='login'] .text-muted {
  color: #5a5a66;
}
body[data-path='login'] .form-label {
  color: #c9c4d4;
}
/* !important: o CSS próprio da página de login do frappe v16 carrega DEPOIS
   do web_include_css e vence a especificidade — exceção registrada em
   OVERRIDES.md (escopo restrito a body[data-path=login/update-password]) */
body[data-path='login'] .form-control,
body[data-path='update-password'] .form-control {
  background: #1a1a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  border-radius: 10px;
}
body[data-path='login'] .field-icon,
body[data-path='login'] .password-icon {
  color: #5a5a66;
}
body[data-path='login'] .form-control::placeholder,
body[data-path='update-password'] .form-control::placeholder {
  color: #5a5a66;
}
body[data-path='login'] .form-control:focus,
body[data-path='update-password'] .form-control:focus {
  border-color: #e85da4 !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 164, 0.18) !important;
  background: #1a1a22 !important;
  color: #fff !important;
}
/* Hierarquia real do template v16: o submit é `.btn-login` (classe btn-default!)
   e o link alternativo é `.btn-login-option`. 1 ação primária por vista. */
body[data-path='login'] .btn-primary,
body[data-path='update-password'] .btn-primary,
body[data-path='login'] button.btn-login[type='submit'] {
  background: #e85da4 !important;
  border-color: #e85da4 !important;
  color: #000 !important;
  font-weight: 600;
  border-radius: 10px;
  transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-path='login'] .btn-primary:hover,
body[data-path='login'] button.btn-login[type='submit']:hover {
  background: #d14690 !important;
  border-color: #d14690 !important;
  color: #000 !important;
  box-shadow: 0 0 24px rgba(232, 93, 164, 0.28);
}
body[data-path='login'] a.btn-default,
body[data-path='login'] .btn-login-option,
body[data-path='login'] a.btn-login-with-email-link {
  background: transparent !important;
  color: #c9c4d4 !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px;
  transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1), color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-path='login'] a.btn-default:hover,
body[data-path='login'] .btn-login-option:hover,
body[data-path='login'] a.btn-login-with-email-link:hover {
  color: #fff !important;
  background: #1a1a22 !important;
}
body[data-path='login'] a {
  color: #e85da4;
}
body[data-path='login'] a:hover {
  color: #f49bc9;
}
body[data-path='login'] ::selection {
  background: #e85da4;
  color: #000;
}

/* ── Foco visível SEMPRE com anel action (teclado): interativos não-input.
   Inputs mantêm o foco por borda+glow próprio. ── */
[data-theme='dark'] :where(a, button, [role='tab'], [role='menuitem'], summary, [tabindex]:not(input):not(textarea):not(select)):focus-visible,
[data-theme='light'] :where(a, button, [role='tab'], [role='menuitem'], summary, [tabindex]:not(input):not(textarea):not(select)):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #e85da4;
}
body[data-path='login'] :where(a, button):focus-visible,
body[data-path='update-password'] :where(a, button):focus-visible {
  /* outline (não box-shadow): o CSS da página de login vence a cascata do shadow */
  outline: 2px solid #e85da4 !important;
  outline-offset: 2px;
}

/* ── Motion (orçamento LIG: micro 150ms swift em interativos; nada decorativo,
   sem animar layout — só cor/fundo/borda/anel) ── */
[data-theme='dark'] :where(button, a, [role='tab'], [role='menuitem'], input, select, textarea),
[data-theme='light'] :where(button, a, [role='tab'], [role='menuitem'], input, select, textarea) {
  transition:
    background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Acessibilidade: movimento reduzido desativa TODA animação/transição
   (inclui beam/pulsos) — obrigatório no brandbook */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lig-beam::before {
    animation: none;
  }
}