/* ========== DESIGN TOKENS (dark only) ==========
 * Compartilhado entre landing e dashboard. Mudou aqui, muda em todo lugar. */
:root {
  color-scheme: dark;

  --bg: hsl(230, 18%, 7%);
  --surface: hsl(230, 16%, 10%);
  --surface-2: hsl(230, 14%, 13%);
  --surface-3: hsl(230, 12%, 17%);
  --border: hsl(230, 10%, 19%);
  --border-strong: hsl(230, 10%, 27%);

  --text: hsl(230, 20%, 96%);
  --text-2: hsl(230, 10%, 72%);
  --text-3: hsl(230, 8%, 52%);

  --primary: hsl(245, 85%, 70%);
  --primary-hover: hsl(245, 85%, 76%);
  --primary-soft: hsla(245, 85%, 65%, .15);
  --success: hsl(155, 60%, 55%);
  --success-soft: hsla(155, 60%, 55%, .12);
  --danger: hsl(0, 75%, 65%);
  --danger-soft: hsla(0, 75%, 60%, .12);
  --warning: hsl(38, 90%, 62%);
  --warning-soft: hsla(38, 90%, 55%, .12);
  --aave: hsl(315, 60%, 68%);
  --aave-soft: hsla(315, 60%, 60%, .15);

  --r-sm: 6px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;

  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

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

html, body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* ========== UTILITIES ========== */
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}