:root {
  --bg: #e8f5f2;        /* light mint/seafoam */
  --surface: #ffffff;     /* card surfaces */
  --text: #0b2b2f;        /* primary text */
  --muted: #5e6e75;       /* secondary text */
  --primary: #14b8a6;      /* teal/blue-green */
  --primary-600: #0f9f88;
  --accent: #2ecc71;       /* accent */

  --card: #ffffff;
}

body {
  background: var(--bg);
  color: var(--text);
}

.container, .panel, .card {
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
}

a { color: var(--primary); text-decoration: none; }

.btn-primary {
  background: var(--primary);
  color: white;
  border: 0;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-primary:hover { background: var(--primary-600); }

/* Inputs / badges / headers */
input, textarea {
  border: 1px solid #d0e6e0;
  background: white;
  color: var(--text);
}

.badge { background: #e0f2f0; color: #0b4f4a; padding: 4px 8px; border-radius: 999px; }

/* Minor typography tweaks for consistency */
h1, h2, h3 { color: var(--text); }
hyperlink { color: var(--primary); }

/* Ensure cards adapt on small screens */
@media (max-width: 600px) {
  .container { padding: 12px; }
}