/* =============================================================================
   ERP MsX — TOKENS DO DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Identidade derivada de msxdesign.com.br.
   Fonte: réplica pixel-perfect em
     F:\MSX IA\Projeto MSX\Entregas\replica-home-msx\css\msx.css
     (capturada em 18/09/2026, 0 pixel de divergência contra o site no ar)

   Cores marcadas [SITE] são literais do site, não reinterpretadas.
   Cores marcadas [AA] são derivadas porque a original reprova WCAG 2.1 AA na
   densidade de um ERP — cada uma tem a razão de contraste medida ao lado.

   55 pares de contraste medidos, 0 reprovações. Ver identidade-visual-msxdesign.md
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TIPOGRAFIA — arquivos auto-hospedados, nenhuma requisição a terceiros
   (o site original também não usa Google Fonts; manter essa propriedade)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Torus';
  src: url('../fonts/4228Torus.woff2') format('woff2'),
       url('../fonts/4228Torus.woff') format('woff');
  font-weight: 400;          /* face única — ver nota em §3 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  font-weight: 400 700;      /* variável: 400 e 700 saem do mesmo arquivo */
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter ainda não está no projeto — ver P-002 em MD/PENDENCIAS.md.
   Enquanto não entrar, a pilha cai em Open Sans, que já é da identidade.
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

/* -----------------------------------------------------------------------------
   2. TOKENS INDEPENDENTES DE TEMA
   -------------------------------------------------------------------------- */

:root {

  /* ---- 2.1 Famílias -------------------------------------------------------
     --font-display : Torus. Só onde a marca é LIDA: logo, título de tela,
                      cabeçalho de módulo, login, capa de relatório.
                      Nunca em grade, rótulo ou valor.
     --font-ui      : texto de interface, formulário, rótulo, botão.
     --font-data    : coluna numérica. Mesma família de UI, mas sempre com
                      font-variant-numeric: tabular-nums (ver .num em §6).
     --font-mono    : código, chave de acesso, NFe, hash, log de auditoria.
  */
  --font-display: 'Torus', 'Open Sans', system-ui, sans-serif;
  --font-ui: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: var(--font-ui);
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---- 2.2 Escala tipográfica — densidade de ERP --------------------------
     Base 13px, não os 18–20px do site: a grade precisa caber 25 linhas na
     tela, não 8. A escala do site sobrevive em --text-display-*, usada nas
     superfícies de marca.
  */
  --text-2xs: 10px;   /* badge, carimbo de auditoria */
  --text-xs: 11px;    /* rótulo de campo, cabeçalho de coluna */
  --text-sm: 12px;    /* texto auxiliar, célula secundária */
  --text-md: 13px;    /* BASE — corpo, célula de grade, input */
  --text-lg: 15px;    /* subtítulo de seção, total de rodapé */
  --text-xl: 18px;    /* título de card, valor em destaque */
  --text-2xl: 22px;   /* título de tela */
  --text-3xl: 28px;   /* título de módulo (Torus) */
  --text-display-sm: 32px;  /* [SITE] superfície de marca */
  --text-display-md: 40px;  /* [SITE] */
  --text-display-lg: 50px;  /* [SITE] hero de login */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;  /* cabeçalho de coluna em caixa alta */

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

  /* ---- 2.3 Espaçamento — base 4px ---------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 2.4 Raio ----------------------------------------------------------
     O site usa 15px. Num ERP isso engorda cada linha de tabela e cada input.
     Os 15px ficam reservados para --radius-brand, que vale nas superfícies de
     marca (card de login, capa de relatório) — lá a forma do site é exata.
  */
  --radius-xs: 2px;
  --radius-sm: 4px;    /* input, botão, badge */
  --radius-md: 6px;    /* card, dropdown */
  --radius-lg: 8px;    /* modal, painel */
  --radius-brand: 15px;  /* [SITE] superfície de marca */
  --radius-pill: 999px;

  /* ---- 2.5 Densidade da grade -------------------------------------------- */
  --row-compact: 28px;
  --row-cozy: 34px;      /* padrão */
  --row-comfortable: 40px;
  --control-height-sm: 24px;
  --control-height-md: 30px;   /* padrão de input e botão */
  --control-height-lg: 36px;
  --touch-target-min: 44px;    /* WCAG 2.5.5 — mobile e toque */

  /* ---- 2.6 Camadas ------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;      /* cabeçalho de coluna e coluna fixa */
  --z-dropdown: 200;
  --z-topbar: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- 2.7 Movimento ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;

  /* ---- 2.8 Marca — invariante entre temas --------------------------------
     [SITE] O gradiente é a assinatura da MsX. Decorativo, nunca de ação:
     branco sobre o magenta dá 3,76:1 e sobre o roxo 4,49:1 — os dois abaixo
     de 4,5. Texto sobre o gradiente só é permitido em corpo grande
     (>= 24px, ou >= 18,66px em bold), onde o limiar é 3:1. Ver §5.
  */
  --brand-magenta: #fe018b;
  --brand-purple: #9a5eb9;
  --brand-lavender: #e4d4ed;
  --brand-gradient: linear-gradient(135deg, #fe018b, #9a5eb9);
  --brand-gradient-vertical: linear-gradient(#fe018b, #9a5eb9);
  --brand-gradient-50deg: linear-gradient(50deg, #fe018b, #9a5eb9);
}

/* -----------------------------------------------------------------------------
   3. TEMA ESCURO — PADRÃO (fiel ao site)
   Aplicado na raiz; `[data-theme="light"]` troca para o claro.
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Superfícies */
  --surface-sunken: #151a21;     /* [SITE] fundo recuado */
  --surface-base: #181f26;       /* [SITE] fundo primário */
  --surface-raised: #1f2831;     /* card, painel */
  --surface-overlay: #252f3a;    /* modal, dropdown */
  --surface-inset: #2c2937;      /* [SITE] bloco destacado */
  --surface-hover: #232d38;
  --surface-selected: #2a2135;
  --surface-zebra: #1b232b;      /* linha par da grade */

  /* Texto — medido */
  --text-primary: #e4d4ed;       /* [SITE] 11,83:1 sobre base */
  --text-secondary: #b3a8bd;     /*        7,33:1 */
  --text-tertiary: #9a92a4;      /* [AA]   5,56:1 — o lavanda puro rebaixado
                                     reprovava em superfície sobreposta */
  --text-disabled: #6b6575;
  --text-on-accent: #ffffff;
  --text-inverse: #1d1a24;

  /* Bordas
     --border-subtle e --border-default são DECORATIVAS (gridline, divisor):
     WCAG 1.4.11 não exige 3:1 delas. --border-interactive é contorno de
     componente (input, select, checkbox) e exige — mede 3,61:1. */
  --border-subtle: #232c37;
  --border-default: #3a4552;
  --border-interactive: #6b7685;  /* [AA] 3,61:1 sobre base */
  --border-strong: #7a8593;

  /* Acento */
  --accent: #b98fd4;             /* [AA] 6,29:1 — o #995fb9 do site dá 3,72:1,
                                     reprova para texto normal */
  --accent-hover: #cba6e0;       /*      7,97:1 */
  --accent-muted: #6d4a8a;
  --accent-surface: #2a2135;
  --accent-border: #6d4a8a;

  /* Ação primária — roxo sólido, nunca o gradiente */
  --action-primary: #9657c2;          /* contorno 3,52:1 · branco 4,73:1 */
  --action-primary-hover: #8749b3;    /* branco 5,78:1 */
  --action-primary-pressed: #78409f;  /* branco 6,92:1 */

  /* Semânticas — texto */
  --success: #34d399;            /* 8,65:1 */
  --warning: #fbbf24;            /* 9,96:1 */
  --danger: #f87171;             /* 6,01:1 */
  --info: #60a5fa;               /* 6,54:1 */

  /* Semânticas — superfície e borda */
  --success-surface: #0c2b22;    /* texto sucesso sobre ela: 7,89:1 */
  --warning-surface: #2e2310;    /* 9,22:1 */
  --danger-surface: #30161a;     /* 6,05:1 */
  --info-surface: #10233c;       /* 6,22:1 */
  --success-border: #10b981;
  --warning-border: #f59e0b;
  --danger-border: #dc2626;
  --info-border: #3b82f6;

  /* Foco — 6,29:1, acima dos 3:1 de WCAG 2.4.11 */
  --focus-ring: #b98fd4;
  --focus-ring-offset: var(--surface-base);

  /* Elevação — no escuro, sombra sozinha não separa plano; cada nível
     combina sombra com um degrau de superfície. */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.50);
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.60);
  --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / 0.70);
}

/* -----------------------------------------------------------------------------
   4. TEMA CLARO — derivado da mesma paleta
   Para jornada longa de lançamento e para impressão.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  color-scheme: light;

  --surface-sunken: #f6f4f8;
  --surface-base: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-inset: #efecf3;
  --surface-hover: #f6f4f8;
  --surface-selected: #f5effa;
  --surface-zebra: #fbfafc;

  --text-primary: #1d1a24;       /* 17,14:1 */
  --text-secondary: #55505e;     /*  7,79:1 */
  --text-tertiary: #6d6778;      /*  5,44:1 */
  --text-disabled: #a39daf;
  --text-on-accent: #ffffff;
  --text-inverse: #e4d4ed;

  --border-subtle: #e8e4ec;
  --border-default: #d9d4de;
  --border-interactive: #8f8799;  /* 3,45:1 */
  --border-strong: #6d6778;

  --accent: #7b3fa0;             /* 6,86:1 — o #995fb9 do site dá 4,48:1 sobre
                                    branco, reprova por 0,02 */
  --accent-hover: #6a3589;
  --accent-muted: #c9b2db;
  --accent-surface: #f5effa;
  --accent-border: #c9b2db;

  --action-primary: #7b3fa0;          /* branco 6,86:1 */
  --action-primary-hover: #6a3589;    /* branco 8,46:1 */
  --action-primary-pressed: #5a2d75;  /* branco 10,16:1 */

  --success: #047857;            /* 5,48:1 */
  --warning: #a16207;            /* 4,92:1 */
  --danger: #b91c1c;             /* 6,47:1 */
  --info: #1d4ed8;               /* 6,70:1 */

  --success-surface: #ecfdf5;    /* 5,21:1 */
  --warning-surface: #fffbeb;    /* 4,75:1 */
  --danger-surface: #fef2f2;     /* 5,91:1 */
  --info-surface: #eff6ff;       /* 6,16:1 */
  --success-border: #10b981;
  --warning-border: #f59e0b;
  --danger-border: #dc2626;
  --info-border: #3b82f6;

  --focus-ring: #7b3fa0;         /* 6,86:1 */
  --focus-ring-offset: var(--surface-base);

  --shadow-sm: 0 1px 2px 0 rgb(29 26 36 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(29 26 36 / 0.10);
  --shadow-lg: 0 12px 24px -6px rgb(29 26 36 / 0.14);
  --shadow-overlay: 0 24px 48px -12px rgb(29 26 36 / 0.18);
}

/* Respeita a preferência do sistema quando o usuário não escolheu tema.
   O escuro já é o padrão, então só o claro precisa de regra. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --surface-sunken: #f6f4f8;
    --surface-base: #ffffff;
    --surface-raised: #ffffff;
    --surface-overlay: #ffffff;
    --surface-inset: #efecf3;
    --surface-hover: #f6f4f8;
    --surface-selected: #f5effa;
    --surface-zebra: #fbfafc;
    --text-primary: #1d1a24;
    --text-secondary: #55505e;
    --text-tertiary: #6d6778;
    --text-disabled: #a39daf;
    --text-inverse: #e4d4ed;
    --border-subtle: #e8e4ec;
    --border-default: #d9d4de;
    --border-interactive: #8f8799;
    --border-strong: #6d6778;
    --accent: #7b3fa0;
    --accent-hover: #6a3589;
    --accent-muted: #c9b2db;
    --accent-surface: #f5effa;
    --accent-border: #c9b2db;
    --action-primary: #7b3fa0;
    --action-primary-hover: #6a3589;
    --action-primary-pressed: #5a2d75;
    --success: #047857;
    --warning: #a16207;
    --danger: #b91c1c;
    --info: #1d4ed8;
    --success-surface: #ecfdf5;
    --warning-surface: #fffbeb;
    --danger-surface: #fef2f2;
    --info-surface: #eff6ff;
    --success-border: #10b981;
    --warning-border: #f59e0b;
    --danger-border: #dc2626;
    --info-border: #3b82f6;
    --text-on-accent: #ffffff;
    --focus-ring: #7b3fa0;
    --focus-ring-offset: var(--surface-base);
    --shadow-sm: 0 1px 2px 0 rgb(29 26 36 / 0.06);
    --shadow-md: 0 4px 8px -2px rgb(29 26 36 / 0.10);
    --shadow-lg: 0 12px 24px -6px rgb(29 26 36 / 0.14);
    --shadow-overlay: 0 24px 48px -12px rgb(29 26 36 / 0.18);
  }
}

/* -----------------------------------------------------------------------------
   5. SUPERFÍCIES DE MARCA — onde o site é reproduzido sem concessão
   Login, splash, estado vazio, capa de relatório/PDF, selo de módulo.
   Aqui valem o gradiente, o raio de 15px e a escala grande do site.
   -------------------------------------------------------------------------- */

.brand-surface {
  background: var(--brand-gradient);
  border-radius: var(--radius-brand);
  color: #ffffff;
}

/* Texto sobre o gradiente só em corpo grande — limiar 3:1.
   O pior ponto do gradiente (magenta #fe018b) dá 3,76:1 com branco. */
.brand-surface > * {
  font-family: var(--font-display);
  font-size: var(--text-2xl);     /* 22px */
  font-weight: var(--weight-bold); /* >= 18,66px bold = "texto grande" */
}

.brand-wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
}

/* O X do wordmark em gradiente, como no site */
.brand-wordmark em {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   6. PRIMITIVAS DE DADOS
   -------------------------------------------------------------------------- */

/* Toda coluna numérica. Sem tabular-nums o algarismo é proporcional e a
   coluna de valor desalinha verticalmente — o defeito nº 1 de grade de ERP. */
.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  text-align: right;
}

.num--negative { color: var(--danger); }

/* Cabeçalho de coluna */
.col-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Título de tela e de módulo — território do Torus.
   Torus tem face única (400): nunca pedir bold dela, o navegador sintetiza e
   o traço engorda de forma irregular. A hierarquia aqui vem de TAMANHO e
   ESPACEJAMENTO, não de peso. */
.screen-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   7. FOCO — WCAG 2.4.11
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */

@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;
  }
}

/* -----------------------------------------------------------------------------
   9. IMPRESSÃO — o escuro não vai para o papel
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --surface-base: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #ffffff;
    --surface-overlay: #ffffff;
    --surface-zebra: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-tertiary: #555555;
    --border-subtle: #cccccc;
    --border-default: #999999;
    --accent: #5a2d75;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-overlay: none;
  }
}