/* Design tokens — cores, tamanhos, variaveis */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#070b1a;--bg2:#0f1629;--bg3:#182744;
  --primary:#6366f1;--primary-light:#818cf8;--primary-dark:#4f46e5;
  --accent:#a78bfa;
  --success:#22c55e;--success-glow:rgba(34,197,94,0.4);
  --warning:#f59e0b;--danger:#ef4444;
  --text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;
  --glass-bg:rgba(255,255,255,0.05);--glass-border:rgba(255,255,255,0.08);
  --glass-hover:rgba(255,255,255,0.08);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --transition:all 0.2s ease;
}
/* Escala tipográfica — usar var(--text-*) nos componentes */
:root{
  --text-xs:0.75rem;    /* 12px */
  --text-sm:0.8125rem;  /* 13px */
  --text-base:0.875rem; /* 14px */
  --text-md:1rem;       /* 16px */
  --text-lg:1.125rem;   /* 18px */
  --text-xl:1.25rem;    /* 20px */
  --text-2xl:1.5rem;    /* 24px */
  --text-3xl:1.875rem;  /* 30px */

  /* Escala de espaçamento — usar var(--sp-*) em padding/margin/gap */
  --sp-1:0.25rem;   /* 4px  */
  --sp-2:0.5rem;    /* 8px  */
  --sp-3:0.75rem;   /* 12px */
  --sp-4:1rem;      /* 16px */
  --sp-5:1.25rem;   /* 20px */
  --sp-6:1.5rem;    /* 24px */
  --sp-8:2rem;      /* 32px */
  --sp-10:2.5rem;   /* 40px */
  --sp-12:3rem;     /* 48px */

  /* Touch target mínimo (WCAG 2.5.5) */
  --touch-min:2.75rem; /* 44px */
}

html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);min-height:100dvh;overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);font-weight:500;font-size:var(--text-base);line-height:1.5;
}

/* Focus visível — acessibilidade teclado */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
input,button,select,textarea{font-family:inherit;font-size:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}