/* ═══════════════════════════════════════════════════════
   MW DESIGN SYSTEM — CORE TOKENS
   Estrutural. Zero cores. Compartilhado entre todos os produtos.
   Cada produto define suas cores em products/{produto}/tokens.css
   ═══════════════════════════════════════════════════════ */

/* ─── Brand Fonts (Montserrat display + Karla body) ─── */
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/karla/Karla-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/karla/Karla-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/karla/Karla-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/karla/Karla-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* ─── Typography ─── */
  --font-head: 'Montserrat', 'Avenir Next', sans-serif;
  /* mono para número tabular. Existia como fallback literal em 23 usos do
     produto (`var(--font-mono,'SF Mono',monospace)`) porque o token não
     existia — e uma 4ª stack crua no command.css. */
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font: 'Karla', -apple-system, system-ui, sans-serif;

  /* ─── Escala de tamanho de texto ───
     BUG: configuration.css, portaltemplate.css, portaltag.css e newsletter.css
     usam var(--text-sm) e var(--text-xs) em 104 lugares, SEM fallback — e estes
     tokens nunca foram definidos. Um var() que não resolve torna a declaração
     inválida, então o elemento herda o tamanho do corpo: rótulos que deveriam
     ser pequenos renderizam grandes e o layout estoura. É o que os relatos
     goRec H-260803-eliteadmin-05/-06 descrevem como "informações quebradas,
     desalinhada, estourando" nas telas de Setup.

     Valores derivados DOS PRÓPRIOS componentes que não usam os tokens: medindo
     font-size por contexto nos outros 12 arquivos, a moda onde --text-xs é
     usado (thead th, pill, small/meta/unit) é 11px nos três; onde --text-sm é
     usado (tbody td, label, texto secundário) a distribuição sobe um degrau, e
     12px é o tamanho mais frequente do theme inteiro (118×).

     Passo de 1px porque é a granularidade real deste design system (10/11/12/13
     convivem lado a lado). px e não rem porque os literais vizinhos DENTRO das
     mesmas tabelas são px — rem divergiria na mesma linha. */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-lg: 16px;
  --text-xl: 20px;

  /* ─── Spacing (4px base) ─── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 32px;
  --s10: 40px;

  /* ─── Border Radius ─── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 100px;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --dur-micro: 150ms;
  --dur-std: 200ms;
  --dur-card: 280ms;
  --dur-page: 350ms;

  /* ─── Z-index scale ───
     Múltiplos de 100 para deixar folga entre tiers. */
  --z-base:        0;
  --z-content:    10;
  --z-panel:     100;
  --z-loading:   120;   /* overlay de carregamento da aba: cobre o conteúdo, nunca o chrome */
  --z-drawer:    200;
  --z-modal:     300;
  /* Popovers ancorados (menu, datepicker) ficam ACIMA de drawer e modal: um menu de linha
     dentro de um modal, ou o datepicker do "Agendar", precisa aparecer sobre o overlay do
     modal. Antes (150) o menu do topo sumia sob o loading-overlay e sob o painel de
     monitores (goRec I-260902-matheus-08/-07, I-260831-matheus-06). */
  --z-dropdown:  350;
  --z-palette:   400;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-emergency: 9999;

  /* ─── Focus (mecânica — cor vem do produto) ─── */
  --focus-ring-width: 3px;

  /* ─── Breakpoints (referência — @media ainda usa literais) ─── */
  --bp-sm:  768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1500px;

  /* ─── Density modes (opt-in via --s-dense-*) ─── */
  --density: 1;
  --s-dense-2: calc(8px  * var(--density));
  --s-dense-3: calc(12px * var(--density));
  --s-dense-4: calc(16px * var(--density));
  --s-dense-5: calc(20px * var(--density));
}

[data-density="compact"]     { --density: 0.85; }
[data-density="comfortable"] { --density: 1.15; }

/* Redeclarar as fórmulas no elemento que carrega [data-density]: custom
   property resolve var() onde é DECLARADA, então as --s-dense-* do :root
   herdam já computadas com --density:1 e o modo escopado não teria efeito. */
[data-density] {
  --s-dense-2: calc(8px  * var(--density));
  --s-dense-3: calc(12px * var(--density));
  --s-dense-4: calc(16px * var(--density));
  --s-dense-5: calc(20px * var(--density));
}