/* Tokens — ponto único de verdade para design. */
:root {
  /* Paleta base (dark SaaS) */
  --bg-0: #0b1020;
  --bg-1: #111834;
  --bg-2: #161f44;
  --bg-3: #1c2755;
  --bg-hover: #20305f;

  --surface: #141b3a;
  --surface-alt: #1a2347;

  --border: #263163;
  --border-strong: #344388;

  --text-1: #e6ebff;
  --text-2: #a8b0d3;
  --text-3: #6b749b;

  /* Brand */
  --brand: #5b7cfa;
  --brand-strong: #3f60e5;
  --brand-soft: rgba(91, 124, 250, 0.15);

  /* Status semânticos */
  --verde: #16a34a;
  --verde-soft: rgba(22, 163, 74, 0.15);
  --amarelo: #eab308;
  --amarelo-soft: rgba(234, 179, 8, 0.15);
  --laranja: #f97316;
  --laranja-soft: rgba(249, 115, 22, 0.15);
  --vermelho: #dc2626;
  --vermelho-soft: rgba(220, 38, 38, 0.18);
  --azul: #0ea5e9;
  --azul-soft: rgba(14, 165, 233, 0.15);
  --cinza: #64748b;
  --cinza-soft: rgba(100, 116, 139, 0.18);

  /* Espaçamento escala 4 */
  --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;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.45);

  /* Tipografia */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-sb: 600;
  --fw-b: 700;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 58px;

  /* Transição */
  --t-fast: 120ms ease;
  --t-med: 220ms ease;
}