/* ============================================================
   tokens.css — Design tokens da Plataforma Condoclin
   Variáveis fundacionais: cor, tipografia, espaçamento, raio.
   Carregado em base.html após Bootstrap, usado em todos os blueprints.
   Referência: docs/auditoria_design.md (Sprints 1 e 8).
   ============================================================ */

:root {
  /* ── Cores: superfície e tinta (texto) ── */
  --surface:        #ffffff;
  --surface-2:      #f7f9fc;
  --surface-bg:     #eef3fa;          /* fundo do app */

  --ink:            #1a2433;          /* texto principal */
  --ink-2:          #4a5568;          /* texto secundário */
  --ink-3:          #6c757d;          /* metadata, labels */
  --ink-4:          #a0aec0;          /* desabilitado, placeholders */

  /* ── Linhas e divisores ── */
  --line:           #e6ebf2;          /* borda padrão */
  --line-2:         #cbd5e0;          /* borda em foco/hover */

  /* ── Marca ── */
  --brand:          #1d6db5;          /* azul institucional Condoclin */
  --brand-dark:     #0d2b5e;          /* azul escuro (sidebar/topbar) */
  --brand-tint:     #e8f1f9;          /* fundo levemente azulado */

  /* ── Estado / semântica ── */
  --success:        #198754;
  --warning:        #fd7e14;
  --danger:         #dc3545;
  --info:           #0dcaf0;
  --neutral:        #6c757d;
  --accent-purple:  #6f42c1;

  /* ── Acentos para .stat-card (mapa semântico) ── */
  --stat-default:   var(--ink-3);
  --stat-success:   var(--success);
  --stat-warning:   var(--warning);
  --stat-danger:    var(--danger);
  --stat-info:      var(--brand);
  --stat-purple:    var(--accent-purple);
  --stat-brand:     var(--brand-dark);

  /* ── Tipografia (escala fixa de 5 tamanhos — ver auditoria §8) ── */
  --fs-xs:          11px;             /* labels uppercase, badges, metadata */
  --fs-sm:          13px;             /* tabela, formulários compactos */
  --fs-base:        14px;             /* texto corrente, títulos de card */
  --fs-md:          17px;             /* subtítulos de seção, modal-title */
  --fs-lg:          22px;             /* page-title */
  --fs-xl:          28px;             /* hero-number em stat-card */

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ── Espaçamento (alinhado à escala do Bootstrap em 0.25rem) ── */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;

  /* ── Raio ── */
  --radius-sm:      4px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-pill:    999px;

  /* ── Sombra ── */
  --shadow-sm:      0 1px 2px rgba(15, 23, 42, .05);
  --shadow:         0 1px 6px rgba(15, 23, 42, .07);
  --shadow-lg:      0 8px 24px rgba(15, 23, 42, .12);
}