/* ===================================================== */
/* BASE.CSS - CORES, FONTES, TEMA E BOTÕES GERAIS */
/* ===================================================== */

/* Variáveis principais do modo escuro */
:root {
  --bg: #07111f;
  --bg-2: #0b1627;

  --panel: #101d31;
  --panel-2: #13233b;

  --border: rgba(255, 255, 255, 0.12);

  --text: #ffffff;
  --muted: #9fb4d0;

  --primary: #7c3aed;
  --primary-2: #8b5cf6;

  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;

  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);

  --font-title: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* Variáveis do modo claro */
body.light-mode {
  --bg: #eef3fb;
  --bg-2: #e2e8f0;

  --panel: #ffffff;
  --panel-2: #f1f5f9;

  --border: rgba(15, 23, 42, 0.14);

  --text: #0f172a;
  --muted: #475569;

  --shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

/* Reset básico */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 34%),
    linear-gradient(180deg, var(--bg), var(--bg-2));

  color: var(--text);
  font-family: var(--font-body);
}

/* Remove sublinhado padrão */
a {
  color: inherit;
  text-decoration: none;
}

/* Botões */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
}

/* Botão principal */
.primary-btn {
  min-height: 50px;
  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 14px;

  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #ffffff;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;

  cursor: pointer;

  box-shadow: 0 14px 35px rgba(124, 58, 237, 0.35);
}

/* Botão secundário */
.secondary-btn {
  min-height: 50px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.04);
  color: var(--text);

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;

  cursor: pointer;
}

/* Botão do tema */
.theme-toggle {
  height: 38px;
  padding: 0 18px;

  border: 1px solid rgba(199, 210, 254, 0.32);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;

  cursor: pointer;
}