/* Engineer Studio — tokens de design (fonte única).
   Paleta oficial (docs/brand/IDENTIDADE.md): #06141B · #11212D · #253745 · #4A5C6A · #9BA8AB · #CCD0CF.
   Usar SEMPRE os tokens semânticos (--es-*), nunca os hex nem as cores da paleta diretamente nas interfaces.
   Cada par texto/fundo usado abaixo é verificado em `contraste.test.mjs` (WCAG 2.x); se mudar um valor,
   o teste diz qual par deixou de cumprir.

   Princípios aplicados (skill apple-design): hierarquia por tipografia e espaço, tracking que acompanha o
   tamanho, alvos de 44 px, resposta imediata ao toque, movimento só em transform/opacity e alternativas para
   prefers-reduced-motion / -transparency / -contrast. */

:root,
[data-tema="claro"] {
  color-scheme: light dark;

  /* ---- Paleta (identidade). Não alterar sem decisão explícita. ---- */
  --es-p1: #06141b;
  --es-p2: #11212d;
  --es-p3: #253745;
  --es-p4: #4a5c6a;
  --es-p5: #9ba8ab;
  --es-p6: #ccd0cf;
  /* Derivado: p6 misturado a 55 % com branco. Dá às superfícies elevadas do tema claro um degrau acima do
     fundo sem introduzir outra cor (a paleta não tem claros mais claros que p6). */
  --es-papel: #e8eae9;

  /* ---- Tema claro (por omissão) ---- */
  --es-bg: var(--es-p6);
  --es-superficie: var(--es-papel);
  --es-superficie-2: var(--es-p6);
  --es-texto: var(--es-p1);
  --es-texto-2: var(--es-p3); /* 7,88:1 sobre p6 */
  --es-texto-suave: var(--es-p4); /* 4,45:1 sobre p6: só texto grande (≥ 24 px) ou não essencial */
  --es-separador: var(--es-p5); /* linhas decorativas, sem informação */
  --es-borda: var(--es-p4); /* contorno de controlos: ≥ 3:1 (WCAG 1.4.11) */
  --es-acento: var(--es-p2);
  --es-acento-hover: var(--es-p1);
  --es-acento-texto: var(--es-p6);
  --es-link: var(--es-p2);
  --es-foco: var(--es-p4);
  --es-anel: rgba(74, 92, 106, 0.4);
  --es-scrim: rgba(6, 20, 27, 0.48);

  /* Estados funcionais: complementares e discretos; nunca substituem a identidade. */
  --es-erro: #8a2a2a;
  --es-erro-fundo: #f6e1df;
  --es-aviso: #6e4a00;
  --es-aviso-fundo: #f5e8cc;
  --es-sucesso: #1b6035;
  --es-sucesso-fundo: #dceedf;

  --es-sombra-1: 0 1px 2px rgba(6, 20, 27, 0.12);
  --es-sombra-2: 0 12px 32px -12px rgba(6, 20, 27, 0.28), 0 2px 8px rgba(6, 20, 27, 0.08);

  /* ---- Tipografia: sistema, com tracking e entrelinha por tamanho (grande = mais apertado) ---- */
  --es-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --es-fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --es-t-micro: 0.75rem; /* 12 */
  --es-t-pequeno: 0.875rem; /* 14 */
  --es-t-corpo: 1rem; /* 16 */
  --es-t-subtitulo: 1.25rem; /* 20 */
  --es-t-titulo: 1.75rem; /* 28 */
  --es-t-destaque: 2.5rem; /* 40 */
  --es-ls-micro: 0.01em;
  --es-ls-pequeno: 0.005em;
  --es-ls-corpo: 0;
  --es-ls-subtitulo: -0.01em;
  --es-ls-titulo: -0.015em;
  --es-ls-destaque: -0.02em;
  --es-lh-compacto: 1.1;
  --es-lh-titulo: 1.2;
  --es-lh-corpo: 1.5;

  /* ---- Espaço (múltiplos de 4 px), raios, alvos ---- */
  --es-e1: 0.25rem;
  --es-e2: 0.5rem;
  --es-e3: 0.75rem;
  --es-e4: 1rem;
  --es-e5: 1.5rem;
  --es-e6: 2rem;
  --es-e7: 3rem;
  --es-e8: 4rem;
  --es-raio-campo: 0.75rem;
  --es-raio-cartao: 1rem;
  --es-raio-grande: 1.5rem;
  --es-alvo: 2.75rem; /* 44 px */

  /* ---- Movimento: respostas curtas; molas só quando houver gesto (ver docs/design) ---- */
  --es-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --es-duracao-curta: 120ms;
  --es-duracao: 220ms;

  /* Breakpoints (CSS não aceita var() em @media; valores de referência):
     telemóvel < 640 px · tablet 640–1023 px · desktop ≥ 1024 px. */
  --es-bp-tablet: 640px;
  --es-bp-desktop: 1024px;
}

/* ---- Tema escuro: segue o sistema; [data-tema="claro"|"escuro"] força um dos dois em qualquer elemento
   (amostra, testes, preferência do utilizador). ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --es-bg: var(--es-p1);
    --es-superficie: var(--es-p2);
    --es-superficie-2: var(--es-p3);
    --es-texto: var(--es-p6);
    --es-texto-2: var(--es-p5); /* 7,64:1 sobre p1 */
    --es-texto-suave: var(--es-p5);
    --es-separador: var(--es-p3);
    --es-borda: var(--es-p5);
    --es-acento: var(--es-p6);
    --es-acento-hover: var(--es-papel);
    --es-acento-texto: var(--es-p1);
    --es-link: var(--es-p6);
    --es-foco: var(--es-p5);
    --es-anel: rgba(155, 168, 171, 0.45);
    --es-scrim: rgba(0, 0, 0, 0.6);

    --es-erro: #e9a5a0;
    --es-erro-fundo: #3a1f24;
    --es-aviso: #e3c47d;
    --es-aviso-fundo: #352b14;
    --es-sucesso: #9ccfae;
    --es-sucesso-fundo: #173326;

    --es-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --es-sombra-2: 0 16px 40px -14px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

[data-tema="escuro"] {
  --es-bg: var(--es-p1);
  --es-superficie: var(--es-p2);
  --es-superficie-2: var(--es-p3);
  --es-texto: var(--es-p6);
  --es-texto-2: var(--es-p5);
  --es-texto-suave: var(--es-p5);
  --es-separador: var(--es-p3);
  --es-borda: var(--es-p5);
  --es-acento: var(--es-p6);
  --es-acento-hover: var(--es-papel);
  --es-acento-texto: var(--es-p1);
  --es-link: var(--es-p6);
  --es-foco: var(--es-p5);
  --es-anel: rgba(155, 168, 171, 0.45);
  --es-scrim: rgba(0, 0, 0, 0.6);

  --es-erro: #e9a5a0;
  --es-erro-fundo: #3a1f24;
  --es-aviso: #e3c47d;
  --es-aviso-fundo: #352b14;
  --es-sucesso: #9ccfae;
  --es-sucesso-fundo: #173326;

  --es-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --es-sombra-2: 0 16px 40px -14px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Contraste aumentado: contornos sólidos e texto sem esmaecimento ---- */
@media (prefers-contrast: more) {
  :root {
    --es-texto-2: var(--es-texto);
    --es-texto-suave: var(--es-texto);
    --es-separador: var(--es-borda);
  }
}

/* ---- Movimento reduzido: sem molas nem deslocamentos; só mudanças de opacidade/cor ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --es-duracao-curta: 0.01ms;
    --es-duracao: 0.01ms;
  }
}