/* ============================================================
   MatchCar — Design System (ref: Dub) · tokens
   Light editorial SaaS: near-white canvas, hairline borders,
   dense Inter type, one electric-blue accent.
   ============================================================ */
:root{
  /* Neutros */
  --canvas:#ffffff;
  --paper:#f5f5f5;
  --ash:#e5e5e5;      /* borda estrutural padrão (1px) */
  --smoke:#d4d4d4;
  --pebble:#c8c8c8;
  --ink:#0a0a0a;
  --charcoal:#171717; /* texto padrão */
  --graphite:#262626;
  --slate:#404040;
  --steel:#525252;
  --fog:#737373;      /* texto muted / placeholder */
  --silver:#a3a3a3;

  /* Acentos (usar com parcimônia, 1 por elemento) */
  --blue:#2563eb;         /* elétrico — links, métrica-chave, ativo */
  --blue-deep:#1e40af;    /* CTA fill */
  --blue-wash:#dbeaff;    /* fill suave do item ativo / badge azul */
  --mint:#dcfce7;         /* wash verde */
  --green:#16a34a;        /* texto verde */
  --tangerine:#ea580c;    /* texto laranja */
  --lavender:#7c3aed;     /* texto violeta */
  --amber-wash:#fef3c7;
  --amber:#b45309;

  /* Tipografia */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Escala tipográfica */
  --t-caption:11px;
  --t-body:14px;
  --t-body-lg:16px;
  --t-subheading:20px;
  --t-heading-sm:24px;
  --t-heading:30px;
  --t-heading-lg:36px;
  --t-display:48px;

  /* Espaçamento (base 4px) */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px; --s24:24px;
  --s28:28px; --s32:32px; --s40:40px; --s48:48px; --s64:64px;

  /* Raios (vocabulário fechado) */
  --r-input:6px;
  --r-button:8px;
  --r-card:12px;
  --r-large:16px;
  --r-full:9999px;

  /* Sombras (raras — sistema é border-first) */
  --sh-subtle:rgba(0,0,0,.05) 0px 1px 2px 0px;
  --sh-ring:rgba(0,0,0,.08) 0px 0px 0px 4px;
  --sh-md:rgba(0,0,0,.1) 0px 10px 15px -3px, rgba(0,0,0,.1) 0px 4px 6px -4px;

  /* Layout — o conteúdo é fluido (sem teto de largura); só a sidebar é fixa. */
  --sidebar-w:236px;
  /* Painel lateral da tela de estoque: cresce com o monitor, dentro de limites. */
  --panel-w:clamp(340px, 24vw, 420px);
}