/* ============================================================
   AlphaNet — Design System
   Paleta: branco + neon índigo. Tipografia: Space Grotesk + Inter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Tokens ── */
:root {
  /* Cores base */
  --color-bg:          #FFFFFF;
  --color-bg-subtle:   #F6F6FB;
  --color-bg-muted:    #EFEFF7;

  /* Texto */
  --color-text-primary:   #08081A;
  --color-text-secondary: #5E5E78;
  --color-text-muted:     #9898B8;

  /* Neon índigo (o acento principal) */
  --color-neon:            #5417F5;
  --color-neon-mid:        #7242FF;
  --color-neon-light:      #9E78FF;
  --color-neon-glow:       rgba(84, 23, 245, 0.10);
  --color-neon-glow-mid:   rgba(84, 23, 245, 0.20);
  --color-neon-glow-strong:rgba(84, 23, 245, 0.32);

  /* Bordas */
  --color-border:       #EAEAF4;
  --color-border-mid:   #D4D4EA;

  /* Feedback */
  --color-success: #0DB97A;
  --color-error:   #F03060;
  --color-warning: #F5A623;

  /* Tipografia */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Espaçamento (base 4px) */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-xs: 0 1px 3px rgba(8, 8, 26, 0.05);
  --shadow-sm: 0 2px 8px rgba(8, 8, 26, 0.07);
  --shadow-md: 0 4px 20px rgba(8, 8, 26, 0.09);
  --shadow-lg: 0 8px 40px rgba(8, 8, 26, 0.11);

  --shadow-neon:        0 0 20px rgba(84, 23, 245, 0.22), 0 0 60px rgba(84, 23, 245, 0.08);
  --shadow-neon-strong: 0 0 30px rgba(84, 23, 245, 0.38), 0 0 80px rgba(84, 23, 245, 0.14);

  /* Transições */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;
  --t-slow: 360ms ease;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* ── Botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  transition: all var(--t-base);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--color-neon);
  color: #fff;
  box-shadow: 0 2px 14px rgba(84, 23, 245, 0.32);
}
.btn-primary:hover {
  background: var(--color-neon-mid);
  box-shadow: var(--shadow-neon);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(84, 23, 245, 0.20);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border-mid);
}
.btn-ghost:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-mid);
  background: var(--color-bg-subtle);
}

/* ── Inputs ── */
.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.input::placeholder {
  color: var(--color-text-muted);
}
.input:focus {
  border-color: var(--color-neon);
  background: #fff;
  box-shadow: 0 0 0 3px var(--color-neon-glow);
}

/* ── Alertas de formulário ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--s5);
}

.alert svg { flex-shrink: 0; margin-top: 1px; }

.alert-error {
  background: rgba(240, 48, 96, 0.07);
  border: 1px solid rgba(240, 48, 96, 0.18);
  color: #C02040;
}

.alert-success {
  background: rgba(13, 185, 122, 0.07);
  border: 1px solid rgba(13, 185, 122, 0.18);
  color: #0A8A5A;
}

/* ── Utilitários de texto ── */
.text-neon      { color: var(--color-neon); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.font-display   { font-family: var(--font-display); }

/* ── Estado vazio (usado em seções sem dados) ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s12) var(--s6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  gap: 4px;
}