:root {
  /* Light theme */
  --bg: #f7fafc;            /* page base (under the photo) */
  --card: #ffffff;          /* cards and panels */
  --muted: #475569;         /* slate-600 for subtle text */
  --text: #0f172a;          /* slate-900 main text */
  --primary: #dc2626;       /* red-600 accent if needed */
  --danger: #ef4444;
}

/* Reset + base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

  /* Background image layer */
  background-image: url('/assets/images/body-bg.png');   /* ← your image */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  /* Soft overlay for readability */
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.55);  /* brighten over the photo */
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3 { margin: 0 0 12px; }
p { margin: 0 0 10px; }
a { color: #b91c1c; text-decoration: none; }  /* deeper red for links */
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
main.container { min-height: calc(100vh - 140px); }