/*
 * theme.css — Tokens visuais do cliente.
 * Este arquivo é substituído por cliente no build Docker.
 * Para personalizar: copie, edite e monte no container como /app/build/theme.css
 *
 * Variáveis de cores vêm do .env (injetadas pelo App.js).
 * Este arquivo controla: tipografia, sombras, raios, padrões, sidebar.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ---- TIPOGRAFIA ---- */
  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --heading-letter-spacing: -0.02em;
  --heading-weight: 700;

  /* ---- CARDS ---- */
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --card-border: 1px solid rgba(0,0,0,0.07);
  --card-radius: 12px;
  --card-bg: #ffffff;

  /* ---- SIDEBAR ---- */
  --sidebar-overlay: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  --nav-active-border: 3px;

  /* ---- BACKGROUND DO APP ---- */
  --body-bg-pattern: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  --body-bg-pattern-size: 24px 24px;

  /* ---- TABELA ---- */
  --table-header-bg: #f8fafc;
  --table-header-color: #64748b;
  --table-header-font-size: 0.72rem;
  --table-row-hover: rgba(37, 99, 235, 0.04);

  /* ---- BOTÕES ---- */
  --btn-font-weight: 600;
}