/* ==========================================================================
   Grupo Lassais — tokens do sistema de design do painel único (GP-0032)
   Versão 1.0 · 01/11/2026 · raia GPDesign
   Regras: só variáveis CSS; nenhum valor de cor/espaço "solto" nos componentes.
   Tema: automático pelo sistema; forçar com <html data-tema="claro|escuro">.
   Empresa ativa: <html data-empresa="grupo|datta-tech|datta-gov|datta-via">.
   Contraste AA conferido por cálculo: ver CONTRASTE.md (gerado por verificar-contraste.py).
   ========================================================================== */

/* ---------- Fonte (Inter, OFL-1.1, servida pelo próprio painel) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fontes/inter-latin-wght-normal.woff2") format("woff2-variations");
  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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fontes/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Paleta-base (não usar direto nos componentes; usar os papéis abaixo) ---------- */
  --preto-lassais: #0b0b0b;   /* marca oficial (manual: preto 100 %) */
  --branco: #ffffff;
  --ouro-300: #e6cd7a;
  --ouro-400: #dcbd55;
  --ouro-500: #d4af37;        /* Ouro Lassais (derivado web adotado no DattaMail desde 09/2026) */
  --ouro-600: #a8861f;
  --ouro-700: #7d6316;
  --ouro-800: #5c4810;

  --pedra-0: #ffffff;
  --pedra-25: #fbfbfa;
  --pedra-50: #f6f6f4;
  --pedra-100: #efefec;
  --pedra-150: #e7e7e3;
  --pedra-200: #dcdcd7;
  --pedra-300: #c7c7c1;
  --pedra-400: #9d9d96;
  --pedra-500: #74746d;
  --pedra-600: #5b5b55;
  --pedra-700: #44443f;
  --pedra-800: #2b2b28;
  --pedra-850: #212120;
  --pedra-900: #181817;
  --pedra-925: #121211;
  --pedra-950: #0b0b0b;

  /* ---------- Tipografia ---------- */
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fonte-recursos: "cv11", "ss01", "ss03";       /* a, 1 e 3 mais legíveis em tela */
  --numeros: tabular-nums;                         /* números alinhados em tabelas e valores */

  --texto-2xs: 0.6875rem;  /* 11 px — rótulos de grupo do menu, legendas */
  --texto-xs: 0.75rem;     /* 12 px — chips, metadados */
  --texto-sm: 0.8125rem;   /* 13 px — tabelas, menus, campos (padrão denso) */
  --texto-md: 0.875rem;    /* 14 px — corpo padrão */
  --texto-lg: 1rem;        /* 16 px — corpo de leitura, celular */
  --texto-xl: 1.125rem;    /* 18 px — título de cartão grande */
  --texto-2xl: 1.375rem;   /* 22 px — título de página */
  --texto-3xl: 1.75rem;    /* 28 px — número de destaque */
  --texto-4xl: 2.25rem;    /* 36 px — login / vazio grande */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 650;

  --altura-justa: 1.25;
  --altura-normal: 1.5;
  --espaco-letra-titulo: -0.015em;
  --espaco-letra-rotulo: 0.06em;

  /* ---------- Espaçamento (grade de 4 px) ---------- */
  --e-0: 0;
  --e-px: 1px;
  --e-0-5: 2px;
  --e-1: 4px;
  --e-1-5: 6px;
  --e-2: 8px;
  --e-2-5: 10px;
  --e-3: 12px;
  --e-3-5: 14px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;

  /* ---------- Raios ---------- */
  --raio-xs: 4px;    /* chips quadrados, marcadores */
  --raio-sm: 6px;    /* botões, campos, itens de menu */
  --raio-md: 8px;    /* cartões pequenos, menus flutuantes */
  --raio-lg: 12px;   /* cartões, diálogos */
  --raio-xl: 16px;   /* painéis grandes, login */
  --raio-total: 999px;

  /* ---------- Medidas do casco ---------- */
  --casco-topo: 56px;
  --casco-lateral: 248px;
  --casco-lateral-recolhida: 64px;
  --casco-faixa-empresa: 3px;
  --conteudo-max: 1280px;
  --controle-sm: 28px;
  --controle-md: 36px;
  --controle-lg: 44px;    /* alvo de toque no celular */

  /* ---------- Movimento ---------- */
  --dur-rapida: 120ms;
  --dur-media: 180ms;
  --dur-lenta: 260ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --curva-saida: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Camadas ---------- */
  --z-topo: 30;
  --z-lateral: 40;
  --z-menu: 50;
  --z-dialogo: 60;
  --z-toast: 70;
}

/* ==========================================================================
   PAPÉIS — tema CLARO (padrão)
   ========================================================================== */
:root,
:root[data-tema="claro"] {
  color-scheme: light;

  /* superfícies */
  --sup-fundo: var(--pedra-50);          /* fundo da página */
  --sup-base: var(--pedra-0);            /* cartões, tabelas, lateral */
  --sup-elevada: var(--pedra-0);         /* menus, diálogos */
  --sup-sutil: var(--pedra-25);          /* cabeçalho de tabela, área de filtro */
  --sup-hover: var(--pedra-100);
  --sup-ativa: var(--pedra-150);
  --sup-invertida: var(--pedra-950);     /* barra superior (casco) */
  --sup-invertida-2: var(--pedra-850);   /* campos/botões dentro da barra superior */
  --sup-sobreposicao: rgb(11 11 11 / 0.48);

  /* bordas */
  --borda: var(--pedra-200);
  --borda-forte: var(--pedra-300);
  --borda-sutil: var(--pedra-150);
  --borda-invertida: var(--pedra-800);
  --borda-campo: #8a8a83;               /* contorno de campo: ≥ 3:1 (WCAG 1.4.11) */

  /* texto */
  --txt: var(--pedra-950);
  --txt-2: var(--pedra-600);             /* secundário — AA 6,9:1 sobre branco */
  --txt-3: #6a6a64;                      /* terciário/placeholder — AA sobre branco e sobre o fundo */
  --txt-desabilitado: var(--pedra-400);  /* só desabilitado (isento de AA pela WCAG) */
  --txt-invertido: var(--pedra-0);
  --txt-invertido-2: var(--pedra-300);
  --txt-link: #1d4fd8;

  /* ação principal (sóbria: preto Lassais; no escuro inverte) */
  --acao: var(--pedra-950);
  --acao-hover: var(--pedra-800);
  --acao-txt: var(--pedra-0);

  /* ouro: destaque de marca, NUNCA cor de texto sobre claro (exceto --ouro-txt) */
  --ouro: var(--ouro-500);
  --ouro-txt: var(--ouro-700);           /* ouro legível sobre claro */
  --ouro-suave: #f7efd6;

  /* foco (WCAG 2.4.7/1.4.11: ≥ 3:1 contra o fundo) */
  --foco: #1d4fd8;
  --foco-anel: 0 0 0 2px var(--sup-base), 0 0 0 4px var(--foco);

  /* estados */
  --ok: #15803d;      --ok-txt: #166534;      --ok-suave: #e8f5ec;      --ok-borda: #b7e0c3;
  --aviso: #b45309;   --aviso-txt: #92400e;   --aviso-suave: #fdf3e2;   --aviso-borda: #f3d5a3;
  --perigo: #b91c1c;  --perigo-txt: #991b1b;  --perigo-suave: #fcebeb;  --perigo-borda: #f2c0c0;
  --info: #1d4fd8;    --info-txt: #1e40af;    --info-suave: #eaf0fd;    --info-borda: #c3d3f7;
  --neutro: var(--pedra-600); --neutro-txt: var(--pedra-700); --neutro-suave: var(--pedra-100); --neutro-borda: var(--pedra-200);

  /* sombras (curtas e frias; nada de "glow") */
  --sombra-1: 0 1px 2px rgb(11 11 11 / 0.06);
  --sombra-2: 0 1px 2px rgb(11 11 11 / 0.06), 0 2px 6px rgb(11 11 11 / 0.06);
  --sombra-3: 0 4px 12px rgb(11 11 11 / 0.08), 0 12px 32px rgb(11 11 11 / 0.10);
  --sombra-4: 0 8px 24px rgb(11 11 11 / 0.12), 0 24px 64px rgb(11 11 11 / 0.16);

  /* esqueleto (carregando) */
  --esqueleto: var(--pedra-150);
  --esqueleto-brilho: var(--pedra-50);
}

/* ==========================================================================
   PAPÉIS — tema ESCURO
   ========================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --sup-fundo: var(--pedra-925);
  --sup-base: var(--pedra-900);
  --sup-elevada: var(--pedra-850);
  --sup-sutil: #1b1b1a;
  --sup-hover: #262624;
  --sup-ativa: #30302d;
  --sup-invertida: var(--pedra-950);
  --sup-invertida-2: var(--pedra-850);
  --sup-sobreposicao: rgb(0 0 0 / 0.62);

  --borda: #2f2f2c;
  --borda-forte: #3d3d39;
  --borda-sutil: #262624;
  --borda-invertida: #2b2b28;
  --borda-campo: #6c6c66;

  --txt: #f2f2ef;
  --txt-2: #b4b4ad;
  --txt-3: #8f8f88;
  --txt-desabilitado: #5f5f59;
  --txt-invertido: var(--pedra-0);
  --txt-invertido-2: var(--pedra-300);
  --txt-link: #8db1ff;

  --acao: #f2f2ef;
  --acao-hover: #ffffff;
  --acao-txt: var(--pedra-950);

  --ouro: var(--ouro-500);
  --ouro-txt: var(--ouro-400);
  --ouro-suave: #2c2511;

  --foco: #8db1ff;
  --foco-anel: 0 0 0 2px var(--sup-base), 0 0 0 4px var(--foco);

  --ok: #4ade80;      --ok-txt: #86efac;      --ok-suave: #12261a;      --ok-borda: #1f4a2e;
  --aviso: #f59e0b;   --aviso-txt: #fcd34d;   --aviso-suave: #2b1f0b;   --aviso-borda: #5a3d10;
  --perigo: #f87171;  --perigo-txt: #fca5a5;  --perigo-suave: #2d1414;  --perigo-borda: #5c2222;
  --info: #8db1ff;    --info-txt: #b6cdff;    --info-suave: #141f38;    --info-borda: #2a3d6b;
  --neutro: #a3a39c;  --neutro-txt: #d4d4cf;  --neutro-suave: #262624;  --neutro-borda: #3d3d39;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3);
  --sombra-3: 0 4px 12px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.4);
  --sombra-4: 0 8px 24px rgb(0 0 0 / 0.5), 0 24px 64px rgb(0 0 0 / 0.5);

  --esqueleto: #262624;
  --esqueleto-brilho: #30302d;
}

/* tema automático: segue o sistema quando a pessoa não escolheu */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --sup-fundo: var(--pedra-925); --sup-base: var(--pedra-900); --sup-elevada: var(--pedra-850); --sup-sutil: #1b1b1a;
    --sup-hover: #262624; --sup-ativa: #30302d; --sup-sobreposicao: rgb(0 0 0 / 0.62);
    --borda: #2f2f2c; --borda-forte: #3d3d39; --borda-sutil: #262624; --borda-campo: #6c6c66;
    --txt: #f2f2ef; --txt-2: #b4b4ad; --txt-3: #8f8f88; --txt-desabilitado: #5f5f59; --txt-link: #8db1ff;
    --acao: #f2f2ef; --acao-hover: #ffffff; --acao-txt: var(--pedra-950);
    --ouro-txt: var(--ouro-400); --ouro-suave: #2c2511;
    --foco: #8db1ff;
    --ok: #4ade80; --ok-txt: #86efac; --ok-suave: #12261a; --ok-borda: #1f4a2e;
    --aviso: #f59e0b; --aviso-txt: #fcd34d; --aviso-suave: #2b1f0b; --aviso-borda: #5a3d10;
    --perigo: #f87171; --perigo-txt: #fca5a5; --perigo-suave: #2d1414; --perigo-borda: #5c2222;
    --info: #8db1ff; --info-txt: #b6cdff; --info-suave: #141f38; --info-borda: #2a3d6b;
    --neutro: #a3a39c; --neutro-txt: #d4d4cf; --neutro-suave: #262624; --neutro-borda: #3d3d39;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3);
    --sombra-3: 0 4px 12px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.4); --sombra-4: 0 8px 24px rgb(0 0 0 / 0.5), 0 24px 64px rgb(0 0 0 / 0.5);
    --esqueleto: #262624; --esqueleto-brilho: #30302d;
  }
}

/* ==========================================================================
   EMPRESA ATIVA — uma cor de acento por empresa (medida dos logos oficiais)
   --emp        faixa de 3 px, marcador do seletor, item ativo do menu (não-texto, ≥ 3:1)
   --emp-txt    texto/ícone na cor da empresa sobre superfície clara/escura (≥ 4,5:1)
   --emp-suave  fundo do item ativo e da etiqueta da empresa
   --emp-sobre  texto da etiqueta cheia, que usa --emp-txt como fundo
   ========================================================================== */
:root {
  /* valores por empresa ficam disponíveis sempre (etiquetas na lista "Precisa de você") */
  --cor-grupo: var(--ouro-600);    --cor-grupo-txt: var(--ouro-700);   --cor-grupo-suave: #f7efd6;   --cor-grupo-sobre: #ffffff;
  --cor-tech: #0a84e0;             --cor-tech-txt: #075a9c;            --cor-tech-suave: #e6f2fc;    --cor-tech-sobre: #ffffff;
  --cor-gov: #e85a00;              --cor-gov-txt: #a63f00;             --cor-gov-suave: #fdeee4;     --cor-gov-sobre: #ffffff;
  --cor-via: #1b3a8a;              --cor-via-txt: #1b3a8a;             --cor-via-suave: #e9edf7;     --cor-via-sobre: #ffffff;
  --cor-grupo-faixa: var(--ouro-500); --cor-tech-faixa: #0a84e0; --cor-gov-faixa: #e85a00; --cor-via-faixa: #4c7be8; --cor-outra-faixa: #8a8a83;
  --cor-outra: var(--pedra-600);   --cor-outra-txt: var(--pedra-700); --cor-outra-suave: var(--pedra-100); --cor-outra-sobre: #ffffff;

  --emp: var(--cor-grupo); --emp-txt: var(--cor-grupo-txt); --emp-suave: var(--cor-grupo-suave); --emp-sobre: var(--cor-grupo-sobre);
  --emp-faixa: var(--cor-grupo-faixa); /* faixa de 3 px sobre a barra preta: ouro claro no Grupo, cor da empresa nas demais */
}
:root[data-tema="escuro"] {
  --cor-grupo: var(--ouro-500); --cor-grupo-txt: var(--ouro-400); --cor-grupo-suave: #2c2511; --cor-grupo-sobre: #0b0b0b;
  --cor-tech: #3aa3f5;  --cor-tech-txt: #7cc2fa; --cor-tech-suave: #10263a; --cor-tech-sobre: #0b0b0b;
  --cor-gov: #ff7a26;   --cor-gov-txt: #ffa266;  --cor-gov-suave: #33190a;  --cor-gov-sobre: #0b0b0b;
  --cor-via: #6d8ff0;   --cor-via-txt: #a3b8f7;  --cor-via-suave: #151d36;  --cor-via-sobre: #0b0b0b;
  --cor-outra: #a3a39c; --cor-outra-txt: #d4d4cf; --cor-outra-suave: #262624; --cor-outra-sobre: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-grupo: var(--ouro-500); --cor-grupo-txt: var(--ouro-400); --cor-grupo-suave: #2c2511; --cor-grupo-sobre: #0b0b0b;
    --cor-tech: #3aa3f5;  --cor-tech-txt: #7cc2fa; --cor-tech-suave: #10263a; --cor-tech-sobre: #0b0b0b;
    --cor-gov: #ff7a26;   --cor-gov-txt: #ffa266;  --cor-gov-suave: #33190a;  --cor-gov-sobre: #0b0b0b;
    --cor-via: #6d8ff0;   --cor-via-txt: #a3b8f7;  --cor-via-suave: #151d36;  --cor-via-sobre: #0b0b0b;
    --cor-outra: #a3a39c; --cor-outra-txt: #d4d4cf; --cor-outra-suave: #262624; --cor-outra-sobre: #0b0b0b;
  }
}
[data-empresa="grupo"]      { --emp-faixa: var(--cor-grupo-faixa); --emp: var(--cor-grupo); --emp-txt: var(--cor-grupo-txt); --emp-suave: var(--cor-grupo-suave); --emp-sobre: var(--cor-grupo-sobre); }
[data-empresa="datta-tech"] { --emp-faixa: var(--cor-tech-faixa); --emp: var(--cor-tech);  --emp-txt: var(--cor-tech-txt);  --emp-suave: var(--cor-tech-suave);  --emp-sobre: var(--cor-tech-sobre); }
[data-empresa="datta-gov"]  { --emp-faixa: var(--cor-gov-faixa); --emp: var(--cor-gov);   --emp-txt: var(--cor-gov-txt);   --emp-suave: var(--cor-gov-suave);   --emp-sobre: var(--cor-gov-sobre); }
[data-empresa="datta-via"]  { --emp-faixa: var(--cor-via-faixa); --emp: var(--cor-via);   --emp-txt: var(--cor-via-txt);   --emp-suave: var(--cor-via-suave);   --emp-sobre: var(--cor-via-sobre); }
[data-empresa="outra"]      { --emp-faixa: var(--cor-outra-faixa); --emp: var(--cor-outra); --emp-txt: var(--cor-outra-txt); --emp-suave: var(--cor-outra-suave); --emp-sobre: var(--cor-outra-sobre); }

/* menos movimento quando a pessoa pede */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
}