/*
  Design tokens derivados de exemplo.png (console claro estilo SaaS).
  Paleta, tipografia, espacamentos, raios e sombras vivem aqui como custom
  properties. Nenhum framework de CSS. Tudo escrito a mao.
*/

:root {
  /* Cores de superficie */
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #fafbfc;
  --surface-hover: #f2f4f7;

  /* Bordas e linhas */
  --border: #e5e7eb;
  --border-strong: #d5d8dd;

  /* Texto */
  --text: #111827;
  --text-muted: #6b7280;
  --text-subtle: #9ca3af;
  --text-invert: #ffffff;

  /* Marca e estados */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff4ff;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --ink: #0a0a0a;

  /* Paleta categorica para os graficos (derivada da referencia) */
  --c1: #2563eb;
  --c2: #16a34a;
  --c3: #7c3aed;
  --c4: #ea580c;
  --c5: #0891b2;
  --c6: #db2777;

  /* Tipografia */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Espacamentos (escala de 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Raios */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* Sombras suaves, como na referencia */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Layout */
  --content-max: 1200px;
  --header-h: 60px;
}