/*
  shared.css — styles used on every page of the site
  ────────────────────────────────────────────────────
  To retheme the entire site, edit :root below.
  Page-specific styles live in the <style> tag of each HTML file.
  Page-specific overrides always come after this file in the <head>.
*/

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── COLOUR PALETTE ── */
:root {
  --teal:   #2a9d8f;
  --orange: #f4a261;
  --coral:  #e76f51;
  --yellow: #e9c46a;
  --green:  #a1c181;
  --bg:     #f5f0e8;
}

/* ── BASE ── */
html, body {
  background: var(--bg);
  color: #1a1a1a;
  font-family: 'Outfit', sans-serif;
  cursor: none; /* system cursor hidden; #cursor takes over on desktop */
}

/* ── CUSTOM CURSOR ── */
/* Hover/active states are defined per-page since they differ between pages */
#cursor {
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: multiply;
}

/* ── BACKGROUND ELEMENTS — structural properties ── */
/* Each page sets its own background-image / gradient on these */
.bg-grid    { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* ── MOBILE — restore system cursor, hide custom ── */
@media (max-width: 768px) {
  html, body { cursor: auto; }
  #cursor { display: none; }
}
