/* Nexa Finance — direção A · grafite e laranja (08/11/2026)
   Fonte: design system "Nexa Finance" (claude.ai/artifact/Mz5wsTDwanJhzhi6M9rMut).
   Grafite emoldura, branco é onde se trabalha, laranja aponta a resposta. */
:root {
  /* Grafite */
  --graphite-950: #0e0f11; /* cabeçalho, rodapé, bloco de resposta */
  --graphite-900: #17191c; /* superfície elevada sobre grafite, barra fixa mobile */
  --graphite-800: #25282d; /* divisórias e campos sobre grafite */
  --graphite-700: #3a3e45;
  --graphite-500: #6b717a; /* texto auxiliar sobre branco (4,9:1) */
  --graphite-300: #b4b8bf; /* barras não vencedoras */
  --graphite-200: #d6d8dc; /* bordas de controle, trilho */
  --graphite-100: #eceded;

  /* Laranja: sinal, nunca fundo de área grande (~5% da tela) */
  --orange-700: #b4440a; /* laranja em TEXTO sobre branco (5,6:1) */
  --orange-600: #d9560f; /* hover do primário */
  --orange-500: #f26b1f; /* marca: botão primário, vencedor, traço do logo. Texto sobre ele = graphite-950 */
  --orange-400: #ff8a47; /* laranja em texto sobre grafite */
  --orange-100: #ffe6d6;
  --orange-50:  #fff5ee;

  /* Superfícies e texto */
  --surface: #ffffff;
  --surface-subtle: #f6f6f5;
  --surface-sunken: #efefee;
  --ink: #111317;
  --ink-secondary: #454a52;
  --ink-muted: var(--graphite-500);
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #a3a8b0;
  --line: #e4e5e7;
  --line-strong: var(--graphite-200);

  /* Semânticos */
  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-text: var(--orange-700);
  --on-accent: var(--graphite-950);
  --bar-winner: var(--orange-500);
  --bar-default: var(--graphite-300);
  --status-official: #15803d;
  --status-historical: #8a6a12;
  --status-failed: #b91c1c; /* só erro/falha */
  --status-failed-bg: #fdeaea;

  /* Tipografia: Inter 400/500/600, números com tabular-nums */
  --font-sans: Inter, "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: 600 44px/48px var(--font-sans);
  --text-h1: 600 32px/38px var(--font-sans);
  --text-h2: 600 22px/28px var(--font-sans);
  --text-h3: 600 17px/24px var(--font-sans);
  --text-body: 400 16px/24px var(--font-sans);
  --text-body-sm: 400 14px/20px var(--font-sans);
  --text-label: 500 13px/18px var(--font-sans);
  --text-caption: 400 12px/16px var(--font-sans);
  --text-overline: 600 11px/14px var(--font-sans); /* + letter-spacing .12em, caixa alta */

  /* Espaço (4 px) e forma */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #f26b1f;
  --shadow-sticky: 0 -1px 0 #e4e5e7, 0 -8px 24px rgba(14, 15, 17, 0.08);

  /* Layout */
  --container-max: 1200px;
  --form-column: 460px;
  --header-height: 64px;
  /* breakpoints: tablet 768px, desktop 1080px */
}