:root {
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;

  --bg: #f3f8f7;
  --bg-elevated: #ffffff;
  --bg-soft: #e9f4f2;
  --text: #10241f;
  --text-muted: #4b635e;
  --border: #c9ddda;
  --accent: #14b8a6;
  --accent-strong: #0f8f81;
  --accent-soft: rgba(20, 184, 166, 0.16);
  --danger: #dc2626;
  --success: #047857;

  --shadow-card: 0 14px 36px rgba(16, 36, 31, 0.08);
  --radius: 16px;
}

html[data-theme='dark'] {
  --bg: #081514;
  --bg-elevated: #102422;
  --bg-soft: #0d1b1a;
  --text: #def7f2;
  --text-muted: #8fb5ae;
  --border: #1f3a36;
  --accent: #14b8a6;
  --accent-strong: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, 0.2);

  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.35);
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}