/* Design tokens: carregar ANTES de css/style.css.

   Nenhuma cor de destaque literal fora daqui: a cor do portal vem do banco
   para `--accent`, então todo hover/fundo/borda "da cor do tema" tem que
   derivar dele. `rgba(59,130,246,.07)` espalhado pelo admin fazia portal
   verde ter hover azul. */

:root {
  /* ── Espaçamento (passo 4px) ── */
  --space-1:  .25rem;   /*  4px */
  --space-2:  .5rem;    /*  8px */
  --space-3:  .75rem;   /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */

  /* ── Raio ── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:  12px;
  --radius-full: 999px;

  /* ── Tipografia. 16px de base: abaixo disso o iOS dá zoom no foco
        do input e parece bug. ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   .75rem;   /* 12px, mínimo absoluto, só metadado */
  --text-sm:   .875rem;  /* 14px */
  --text-base: 1rem;     /* 16px, corpo */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.3rem;   /* 21px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  2rem;     /* 32px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Elevação: três níveis, não mais. ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow:    0 4px 12px rgba(0,0,0,.32);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.45);

  /* ── Movimento, por intenção: toque / estado local / painel / página.
        Saída mais rápida que entrada: sair devagar parece travado. ── */
  --dur-instant: 120ms;
  --dur-fast:    180ms;
  --dur-normal:  260ms;
  --dur-slow:    420ms;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in:  cubic-bezier(.55, 0, 1, .45);

  /* ── Camadas (z-index vinha sendo chutado: 300 aqui, 10 ali) ── */
  --z-base:      1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-backdrop: 400;
  --z-modal:    410;
  --z-toast:    500;

  /* ── Alvo de toque ── */
  --tap-min: 44px;

  /* ── Layout ───────────────────────────────────────────────────*/
  --nav-h:     64px;
  --sidebar-w: 240px;
  --content-max: 1600px;
}

/* Cores derivadas de --accent: recalculam sozinhas quando o dono troca a
   cor do portal. color-mix() já era usado em style.css. */
:root {
  /* Fundos tingidos: hover de linha de tabela, chip, dropzone ativa */
  --accent-wash:   color-mix(in srgb, var(--accent)  6%, transparent);
  --accent-tint:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 22%, transparent);

  /* Bordas e anel de foco */
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --focus-ring:    var(--accent);
  --focus-width:   2px;
  --focus-offset:  2px;

  /* Cor do TEXTO por cima da cor de destaque. Toda cor configurável exige duas
     decisões: a cor e o que se escreve em cima dela. O padrão é o BRANCO: é o
     que se espera de um botão colorido e o que mais destaca o rótulo nas cores
     fechadas (5,7:1 no roxo #7c3aed). Nas três cores claras da paleta o branco
     seria ilegível (2,3:1 no verde, 2,8:1 no laranja, 1,9:1 no amarelo), então
     `applyTheme()` em js/theme.js sobrescreve este token com preto **só** nesses
     temas, pelo campo `onAccent` do mapa THEMES. Quem decide é o tema; aqui fica
     o padrão, que é o que vale antes de a configuração do portal carregar. */
  --on-accent:  #fff;
  --on-success: #000;

  /* Estados semânticos tingidos (mesma ideia, cor fixa) */
  --danger-tint:  color-mix(in srgb, var(--danger)  12%, transparent);
  --success-tint: color-mix(in srgb, var(--success) 14%, transparent);
  --warning:      #f59e0b;
  --warning-tint: color-mix(in srgb, var(--warning) 14%, transparent);
}

/* Sem color-mix: cinza translúcido. Perde o tingimento, nada some. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --accent-wash:   rgba(128,128,128,.06);
    --accent-tint:   rgba(128,128,128,.12);
    --accent-strong: rgba(128,128,128,.22);
    --accent-border: var(--border);
    --danger-tint:   rgba(239,68,68,.12);
    --success-tint:  rgba(16,185,129,.14);
    --warning-tint:  rgba(245,158,11,.14);
  }
}

/* Foco visível (WCAG 2.2). `:focus-visible` mostra o anel só no teclado,
   então o clique de mouse continua limpo.

   `:is` e não `:where`: com `:where` a regra vale (0,1,0), empata com `.btn` e
   perde por ordem de arquivo (style.css carrega depois). Foi exatamente isso
   que deixou o produto inteiro sem anel de foco até 15/08/2026. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Navbar fixa: sem isto o Tab leva o foco para trás dela. */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }

/* Movimento reduzido. 1ms em vez de 0 para transitionend continuar
   disparando; senão modal que fecha nele nunca fecha. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}