:root {
  --bg: #f3f4f6;           /* light gray page background */
  --card: #ffffff;         /* pure white card */
  --border: #d1d5db;       /* stronger border */
  --text: #111827;
  --muted: #4b5563;

  --accent: #ea580c;       /* orange */
  --accent-contrast: #ffffff;

  --shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}


[data-theme="dark"] {
  --bg: #0f1115;
  --card: #161a21;
  --border: #2c323c;
  --text: #e5e7eb;
  --muted: #9ca3af;

  --accent: #22d3ee;           /* cyan for dark */
  --accent-contrast: #0f1115;
}

html {
  font-size: 16px; /* prevents iOS zoom */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.25s ease, color 0.25s ease;
}