/* =========================================================
   TOKENS — única fonte de verdade para cor/tipografia/espaço
   ========================================================= */
:root {
  /* Cor — base */
  --bg-app:        #0D0707;
  --bg-header:     #130A0B;
  --bg-panel:      #180D0F;
  --bg-panel-2:    #130A0B;
  --bg-raised:     #221416;
  --border-subtle: rgba(255, 90, 90, .09);
  --border-strong: rgba(255, 90, 90, .2);

  /* Cor — acento */
  --accent:        #F5304C;
  --accent-strong: #C21F3A;
  --accent-soft:   rgba(245, 48, 76, .16);
  --accent-light:  #FF7A63;
  --danger:        #F04552;
  --success:       #22C55E;
  --warning:       #F5B942;

  /* Cor — texto */
  --text-primary:   #ECF1FA;
  --text-secondary: #93A1BD;
  --text-tertiary:  #5F6B85;

  /* Tipografia */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);

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

  /* Forma */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Movimento */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  background: radial-gradient(120% 140% at 15% -10%, #2E0F14 0%, var(--bg-app) 55%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

button, input, select { font: inherit; color: inherit; }

button {
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}

button:disabled { cursor: not-allowed; opacity: .45; }

select {
  background: none;
  border: none;
  width: 100%;
}

svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Foco visível sempre — acessibilidade não é opcional */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--text-primary); }