/* ============================================================================
   STG ANALYTICS — Design System v2  (Stripe-caliber, light)
   A neutral-dominant, hairline-bordered, shadow-light system.
   ============================================================================ */

:root {
  /* ── Brand & semantic (used sparingly) ───────────────────────────────── */
  --brand:        #635BFF;   /* single accent */
  --brand-600:    #574FE6;
  --brand-700:    #4A43C4;
  --brand-tint:   #F1F0FE;   /* very soft indigo wash */
  --brand-ring:   rgba(99, 91, 255, 0.18);

  --pos:          #197A3E;   /* positive money (deep green, legible) */
  --pos-tint:     #E7F4EC;
  --neg:          #C1352B;   /* negative money (deep red) */
  --neg-tint:     #FBEBEA;
  --warn:         #9A6700;   /* attention text */
  --warn-tint:    #FBF3E2;
  --info:         #1F6FCC;
  --info-tint:    #EAF3FC;

  /* ── Neutral scale (cool gray, Stripe-ish) ───────────────────────────── */
  --n-950: #0A0B0D;
  --n-900: #1A1C1F;   /* primary heading ink */
  --n-800: #2A2D33;
  --n-700: #414651;   /* body strong */
  --n-600: #545A66;
  --n-500: #6B7280;   /* secondary text */
  --n-400: #8A909C;   /* tertiary / captions */
  --n-300: #AEB3BD;
  --n-250: #C7CAD1;
  --n-200: #E1E3E8;   /* strong border */
  --n-150: #ECEEF1;   /* default border */
  --n-100: #F3F4F6;   /* hairline / subtle border */
  --n-75:  #F7F8FA;   /* subtle fill */
  --n-50:  #FAFBFC;   /* app background tint */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --bg:          #F6F7F9;   /* app canvas */
  --surface-1:   #FFFFFF;   /* cards */
  --surface-2:   #FBFBFC;   /* subtle panels / table head */
  --surface-3:   #F3F4F6;   /* inset */

  --border:        #E6E8EC;
  --border-strong: #D8DBE0;
  --border-subtle: #F0F1F3;

  /* Sidebar (light, Stripe-like) */
  --side-bg:       #FFFFFF;
  --side-border:   #EBEDF0;
  --side-fg:       #545A66;
  --side-fg-dim:   #8A909C;
  --side-active-bg: var(--brand-tint);
  --side-active-fg: var(--brand-700);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* ── Value hierarchy scale (hero → support → detail) ─────────────────────
     The single most important lever against "everything competes": three
     deliberately distinct sizes so the eye lands on the hero first. */
  --v-hero:    40px;   /* the ONE number that matters most (resultado) */
  --v-lg:      27px;   /* not used as default; occasional emphasis */
  --v-support: 21px;   /* secondary metrics (receita, volume…) */
  --v-detail:  16px;   /* tertiary / muted metrics (prazo, taxa…) */

  /* ── Radius (tighter than v1) ────────────────────────────────────────── */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-full: 999px;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ── Shadows (barely-there) ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 1px rgba(10,11,13,0.03);
  --shadow-sm: 0 1px 2px rgba(10,11,13,0.05);
  --shadow-pop: 0 6px 24px rgba(10,11,13,0.10), 0 1px 3px rgba(10,11,13,0.06);
  --shadow-modal: 0 20px 60px rgba(10,11,13,0.22), 0 2px 8px rgba(10,11,13,0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 240px;
  --header-h: 60px;
}

/* Placeholder dark hook (implemented later, not a priority now) */
[data-theme="dark"] { color-scheme: dark; }

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--n-700);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
canvas { display: block; }
.tabular-nums, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

::selection { background: var(--brand-ring); color: var(--n-900); }

/* Scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--n-250); }
::-webkit-scrollbar-track { background: transparent; }