/* ============================================================================
   MentAI OS — tokens
   Extraídos de apresentacao.mentaiconsultoria.com.br e ADAPTADOS: aquele site é
   uma apresentação (letra grande, muito respiro); isto é um painel de uso diário
   (densidade). Cores, fontes e o raio de 2px são os mesmos; escala e espaçamento
   são menores.

   REGRA: nenhum outro arquivo declara cor, tamanho de fonte ou espaçamento em
   valor cru. Se precisar de um valor novo, ele nasce aqui.

   Fontes hospedadas nesta VPS (108 KB, subconjunto latino). Inter e JetBrains
   Mono são variáveis — um arquivo cobre todos os pesos.
   ============================================================================ */

@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}

:root {
  /* --- Tipografia ------------------------------------------------------- */
  --fonte-titulo: 'DM Serif Display', ui-serif, Georgia, serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px;
  --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-28: 28px;
  --entrelinha: 1.55;
  --entrelinha-titulo: 1.2;
  --espacamento-rotulo: .08em;   /* rótulos em maiúsculas pedem respiro entre letras */

  /* --- Espaçamento: de 4 em 4, nada fora da escala ----------------------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-6: 24px; --e-8: 32px; --e-12: 48px;

  /* --- Bordas e raios: 2px é a assinatura da referência ------------------ */
  --raio: 2px;
  --raio-pilula: 999px;
  --borda: 1px;

  /* --- Estrutura -------------------------------------------------------- */
  --sidebar: 240px;
  --sidebar-recolhida: 64px;
  --largura-max: 1440px;
  --header: 56px;

  /* --- Movimento -------------------------------------------------------- */
  --transicao: 140ms ease;

  /* --- Status ----------------------------------------------------------- */
  /* Iguais nos dois temas. Nunca comunicam sozinhos: sempre cor + ícone +
     palavra, para quem não distingue verde de vermelho (seção 25.8). */
  --ok: #4a7c59;
  --atencao: #b8892b;
  --erro: #a33a2e;
  --neutro: #726c5f;
}

/* --- Tema escuro: a identidade da marca, e o padrão ------------------------ */
/* Fundo abaixado um degrau a pedido do André em 25/07 (era #0a0a0a / #141311 /
   #1d1b17, os valores literais da referência). Contraste remedido depois da
   troca: todos os pares subiram, nenhum caiu. */
:root,
:root[data-tema="escuro"] {
  --bg: #050504;
  --bg-card: #0e0d0c;
  --bg-elevado: #171511;
  --linha: #262320;
  --texto: #f4f1ea;             /* 18,08:1 sobre --bg — medido */
  --texto-secundario: #a39d8f;  /*  7,19:1 sobre --bg-card — medido */
  --marca: #d9b75a;             /* 10,56:1 sobre --bg — medido */
  --marca-forte: #f3d896;
  --marca-preenchida: #d9b75a;
  --texto-sobre-marca: #0a0a0a; /* 10,25:1 sobre a pílula dourada — medido */
  --sombra-flutuante: 0 4px 16px rgba(0, 0, 0, .45);
}

/* --- Tema claro: exigência da seção 22.5, com o dourado corrigido ---------- */
/* O dourado da marca sobre o creme dá 1,71:1 — reprova em qualquer critério e
   some na tela do celular no sol. O #8a7238 da própria referência dá 4,10, ainda
   abaixo do mínimo de 4,5. Por isso aqui o texto e a borda de marca usam #7a6430
   (5,04:1). O dourado original continua, mas só como PREENCHIMENTO, com texto
   preto por cima. */
:root[data-tema="claro"] {
  --bg: #f4f1ea;
  --bg-card: #ffffff;
  --bg-elevado: #eeeae1;
  --linha: #dcd6c8;
  --texto: #1d1b17;             /* 15,24:1 sobre --bg — medido */
  --texto-secundario: #726c5f;  /*  4,62:1 sobre --bg — medido */
  --marca: #7a6430;             /*  5,04:1 sobre --bg — medido */
  --marca-forte: #8a7238;
  --marca-preenchida: #d9b75a;
  --texto-sobre-marca: #0a0a0a;
  --sombra-flutuante: 0 4px 16px rgba(0, 0, 0, .12);
}

/* Sem escolha salva, segue o sistema. Com escolha salva, data-tema manda. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --bg: #f4f1ea;
    --bg-card: #ffffff;
    --bg-elevado: #eeeae1;
    --linha: #dcd6c8;
    --texto: #1d1b17;
    --texto-secundario: #726c5f;
    --marca: #7a6430;
    --marca-forte: #8a7238;
    --sombra-flutuante: 0 4px 16px rgba(0, 0, 0, .12);
  }
}

/* --- Movimento reduzido: exigência da seção 27.1 --------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}