/* ============================================================
   HOP Lab — Design tokens canónicos (Fase F0, rams)
   Fonte única dos valores de marca (cores, fundos, espaçamento, tipo,
   forma, sombra, estados, movimento, camadas) usados pelas páginas
   cliente e staff. Importar ANTES do CSS/estilo próprio da página:
     <link rel="stylesheet" href="/assets/tokens.css?v=2">
   As páginas mantêm as suas variáveis locais; estes tokens ficam
   disponíveis como referência canónica e para páginas novas/re-skins.
   Os --hop-* antigos (v1) ficam como ALIASES no fim — confirmados por
   grep como usados por páginas vivas (notificacoes.html) — para não
   partir nada; não removas nomes sem repetir esse grep.
   ============================================================ */
:root {
  /* MARCA */
  --hop-lime:#AAFF00;   /* acento de marca. NUNCA cor de estado, NUNCA texto */
  --hop-navy:#1e293b;
  /* SUPERFÍCIES */
  --surface:#FFFFFF; --surface-sunk:#F2F3F7; --surface-inset:#F7F8FB; --surface-dark:#111827;
  /* LINHAS */
  --border:#C1CAAD;            /* decorativo */
  --border-strong:#94A3B8;     /* contorno de CONTROLO — 3:1, WCAG 1.4.11 */
  /* TEXTO */
  --text:#1E293B; --text-muted:#575E70; --text-faint:#6B7280;
  --text-on-dark:#E5E7EB; --text-inverse:#FFFFFF;
  /* ESTADO — um valor por ideia, e o par para fundo escuro */
  --danger:#DC2626;  --danger-on-dark:#F2705F;  --danger-bg:#FEF2F2;
  --warning:#B45309; --warning-on-dark:#F0B357; --warning-bg:#FFFBEB;
  --success:#15803D; --success-on-dark:#6EE7A0; --success-bg:#F0FDF4;
  --info:#1D4ED8;    --info-on-dark:#93B4FF;    --info-bg:#EFF6FF;
  --neutral-bg:#F1F5F9;
  /* ESPAÇAMENTO (base 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
  /* TIPO */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-num:56px;
  --lh-tight:1.2; --lh-body:1.5; --fw-reg:400; --fw-med:500; --fw-bold:700;
  /* FORMA */
  --r-sm:8px; --r-md:12px; --r-lg:24px; --r-pill:999px;
  /* SOMBRA (tintada a navy, nunca preto puro) */
  --sh-1:0 1px 2px rgba(17,24,39,.05);
  --sh-2:0 12px 32px -4px rgba(17,24,39,.04);
  --sh-3:0 24px 48px -8px rgba(17,24,39,.12);
  /* ESTADOS */
  --state-hover:rgba(30,41,59,.06); --state-active:rgba(30,41,59,.12);
  --state-selected:rgba(30,41,59,.09); --state-disabled-opacity:.45;
  --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px var(--hop-navy);   /* legado: preferir outline */
  --focus-ring-dark:0 0 0 2px var(--surface-dark), 0 0 0 4px var(--hop-lime);
  --press-shift:translateY(1px);
  /* MOVIMENTO */
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur-press:120ms; --dur-pop:180ms; --dur-modal:240ms;
  /* CAMADAS */
  --z-sticky:100; --z-drawer:8000; --z-modal:9000; --z-toast:100000;

  /* ---- Aliases v1 (confirmados em uso por grep, 2026-09-06) ---- */
  --hop-bg:     var(--surface-sunk);
  --hop-text:   var(--text);
  --hop-muted:  var(--text-muted);
  --hop-border: var(--border);
  --hop-radius:    var(--r-md);
  --hop-radius-lg: var(--r-lg);
  --hop-shadow-card: var(--sh-2);
  --hop-z-modal: var(--z-modal);
  --hop-z-toast: var(--z-toast);
  --hop-font-body:    'Manrope', system-ui, sans-serif;
  --hop-font-display: 'Space Grotesk', sans-serif;
}

/* Acessibilidade global — box-shadow em vez de outline: lima sobre branco
   (outline antigo) era invisível. Nunca voltar a outline:solid var(--hop-lime). */
:focus-visible {
  /* 2026-09-06, medido com Tab em páginas reais — os dois mecanismos falham de maneiras
     diferentes, por isso levam-se OS DOIS:
       · só box-shadow: na monitorização as 11 paragens tinham a sombra dentro de um
         antepassado com overflow:hidden. Sombra cortada = anel invisível.
       · só outline: uma regra local `.foo:focus{outline:none}` (0,2,0) ganha ao
         `:focus-visible` (0,1,0) por especificidade e apaga-o. Deu 8 paragens sem anel
         nenhum na monitorização, 3 no CRM e 3 no cockpit.
     Juntos cobrem-se: se o contorno for apagado, fica a sombra; se a sombra for cortada,
     fica o contorno. Sobrepõem-se quase no mesmo sítio, portanto não se vê a duplicação. */
  outline: 2px solid var(--hop-navy);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* superfícies escuras: navy sobre escuro não se vê */
.sh-hero :focus-visible, .hop-dark :focus-visible, body.view-pro :focus-visible {
  outline-color: var(--hop-lime);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}