/* ==========================================================================
   Design tokens — "Clarity & Precision" (Stitch)
   ========================================================================== */
:root {
  /* Superfícies */
  --surface: #f7f9fb;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-high: #e6e8ea;
  --surface-highest: #e0e3e5;
  --on-surface: #191c1e;
  --on-surface-variant: #45464d;
  --surface-tint: #565e74;
  --outline: #76777d;
  --outline-variant: #c6c6cd;
  --hairline: #e2e8f0;

  /* Primária (obsidiana) */
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #131b2e;
  --inverse-surface: #2d3133;
  --primary-fixed: #dae2fd;
  --primary-fixed-dim: #bec6e0;

  /* Secundária (azul royal) */
  --secondary: #0051d5;
  --secondary-container: #316bf3;
  --secondary-fixed: #dbe1ff;
  --secondary-fixed-dim: #b4c5ff;
  --on-secondary-fixed: #00174b;

  /* Terciária (esmeralda) */
  --tertiary-fixed: #6ffbbe;
  --tertiary-fixed-dim: #4edea3;
  --on-tertiary-container: #009668;
  --on-tertiary-fixed-variant: #005236;

  /* Estados financeiros */
  --positive: #059669;
  --positive-bg: #ecfdf5;
  --warning: #d97706;
  --warning-strong: #b45309;
  --warning-bg: #fffbeb;
  --negative: #dc2626;
  --negative-strong: #ba1a1a;
  --negative-bg: #fef2f2;

  /* Tipografia */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Raios */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-hero: 28px;
  --r-full: 9999px;

  /* Espaçamentos */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --gutter: 1rem;
  --page-x: 1rem;

  /* Elevação */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-1: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 8px 16px -4px rgba(15, 23, 42, 0.03);
  --shadow-2: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 16px 32px -8px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 20px 48px -12px rgba(15, 23, 42, 0.16);
  --shadow-hero: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-fab: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* Layout */
  --header-h: 64px;
  --sidebar-w: 256px;
  --content-max: 1120px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 640px) {
  :root {
    --page-x: 1.5rem;
  }
}