/* ======== Tema Claro ======== */
:root {
  color-scheme: light;

  /* Cores principais extraídas do logo */
  --blue-dark: #0f3a73;
  --blue: #1f77b4;
  --green: #4caf50;
  --lime: #7ed957;
  --yellow: #f4c542;

  /* Identidade principal */
  --primary: var(--green);
  --secondary: var(--blue);
  --accent: var(--yellow);

  /* Fundo e elementos */
  --bg: #f9fafc;
  --card: #ffffff;
  --border: #e1e6ec;
  --text: #1a1a1a;

  /* Sombras */
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ======== Tema Escuro ======== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --blue-dark: #90c7ff;
  --blue: #4aa3ff;
  --green: #6dce7f;
  --lime: #9df77d;
  --yellow: #ffd86b;

  --primary: var(--green);
  --secondary: var(--blue);
  --accent: var(--yellow);

  --bg: #0d0f12;
  --card: #1a1d22;
  --border: #2a2e36;
  --text: #e8e8e8;

  --shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* ======== Reset básico ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  /*font-family: "Inter", "Segoe UI", sans-serif;*/
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Links */
a {
  color: var(--secondary);
  text-decoration: none;
}
a:hover {
  color: var(--primary);
}

/* Botões padrão */
button, .btn {
  font: inherit;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: all .2s ease;
}

.btn.primary {
  background: var(--primary);
  color: #fff;
  border: none;
}
.btn.primary:hover { opacity: .9; }

.btn.ghost {
  background: transparent;
  color: var(--text);
}
.btn.ghost:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent);
}

/* Cartões genéricos */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}