/* =============================================================
   ReportBoard — Design Tokens
   Importe antes de qualquer outro CSS.
   ============================================================= */

:root {
  /* Cores de fundo */
  --bg-base:     #1a1a2e;
  --bg-surface:  #16213e;
  --bg-elevated: #0f3460;

  /* Texto */
  --text-primary: #e0e0e0;
  --text-muted:   #888888;

  /* Destaque */
  --accent:        #4ecca3;
  --accent-hover:  #3ab89a;

  /* Bordas */
  --border: rgba(255, 255, 255, 0.08);

  /* Tipografia */
  --font: 'Inter', system-ui, sans-serif;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Raios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* Transições */
  --transition: 150ms ease;
}