/* Money Finder — tokens.css
   Fonte única de verdade do design system (estilo clean monocromático).
   Paleta: preto/branco/cinzas + cores apenas para elementos semânticos. */

/* Manrope variável (subset latin): um único arquivo cobre os pesos 400–800. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/manrope.woff2") format("woff2"); }

:root {
  /* Neutros (base monocromática) */
  --ink-900: #1a1a1a;   /* títulos, texto forte, botão primário */
  --ink-700: #404040;   /* corpo */
  --ink-500: #737373;   /* secundário */
  --ink-400: #9a9a9a;   /* labels/placeholder */
  --line:    #ececec;   /* bordas */
  --line-2:  #f1f1ef;   /* divisórias mais sutis */
  --bg:      #f7f7f5;   /* fundo do app */
  --bg-2:    #fbfbfa;   /* sidebar / áreas sutis */
  --card:    #ffffff;   /* cards */

  /* Semânticos (somente status/métricas) */
  --success: #1fad66;
  --info:    #2f6bff;
  --warning: #f59e0b;
  --danger:  #e5484d;
  --accent:  #8b5cf6;
  --neutral: #9a9a9a;

  /* Tons suaves p/ fundos de badge */
  --success-soft: #e7f6ee;
  --info-soft:    #e8effe;
  --warning-soft: #fef3e2;
  --danger-soft:  #fdeaea;
  --neutral-soft: #f0f0ee;

  /* Tipografia (escala reduzida — visual mais enxuto e sutil) */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.6875rem;  /* 11 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.9375rem;/* 15 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 1.875rem;  /* 30 */

  /* Raios */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Sombras (quase nulas — destaque via borda) */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow: 0 6px 24px rgba(20, 20, 20, 0.06);

  /* Espaçamento */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}