/* ============================================================
   Izzy Money · design tokens
   Identidade do mascote: grafite profundo + verde Izzy,
   superfícies claras e muito respiro. Mobile-first.
   ============================================================ */
:root{
  /* marca — grafite */
  --ink-950:#070C0A;
  --ink-900:#0F1A17;
  --ink-800:#16241F;
  --ink-700:#1E322B;
  --ink-600:#2A423A;

  /* marca — verde Izzy */
  --izzy-700:#0E6B33;
  --izzy-600:#12833C;
  --izzy-500:#16A34A;
  --izzy-400:#22C55E;
  --izzy-300:#5EE08D;
  --izzy-100:#DCFCE7;
  --izzy-050:#F0FDF4;

  /* apoio */
  --amber-600:#B45309;
  --amber-500:#E0A106;
  --amber-100:#FEF3C7;
  --red-600:#C2352B;
  --red-500:#E14B3F;
  --red-100:#FEE2E0;
  --blue-600:#1D4ED8;
  --blue-500:#2563EB;
  --blue-100:#DBEAFE;
  --violet-500:#7C3AED;
  --violet-100:#EDE9FE;
  --teal-500:#0E9AA7;
  --teal-100:#CFF3F6;
  --pink-500:#DB2777;
  --pink-100:#FCE7F3;

  /* neutros */
  --bg:#F4F7F5;
  --bg-alt:#EBF0EC;
  --surface:#FFFFFF;
  --surface-2:#FAFCFA;
  --line:#E3E9E5;
  --line-strong:#CFD8D2;
  --t-900:#0C1613;
  --t-700:#2B3B35;
  --t-500:#5B6E67;
  --t-400:#7E9089;
  --t-300:#A9B7B1;

  /* tipografia */
  --font-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* raio */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  /* sombra */
  --sh-xs:0 1px 2px rgba(12,22,19,.05);
  --sh-sm:0 2px 6px rgba(12,22,19,.06), 0 1px 2px rgba(12,22,19,.04);
  --sh-md:0 8px 24px -8px rgba(12,22,19,.16), 0 2px 6px rgba(12,22,19,.05);
  --sh-lg:0 24px 60px -20px rgba(12,22,19,.3), 0 8px 20px -12px rgba(12,22,19,.16);

  /* layout */
  --sidebar-w:258px;
  --topbar-h:66px;
  --tabbar-h:0px;
  --gap:16px;
  --maxw:1520px;
  --safe-b:env(safe-area-inset-bottom, 0px);

  --ease:cubic-bezier(.22,.72,.28,1);
}

/* no celular a navegação vira barra inferior */
@media (max-width:900px){
  :root{
    --topbar-h:58px;
    --tabbar-h:62px;
    --gap:12px;
  }
}