/* =========================================================
   base.css — loaded by every page, first
   Design tokens (colours, fonts), reset and the soft gold/red
   background. Change colours and fonts here only.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --bg: #fdfcf9;      /* warm white */
  --ink: #16130f;     /* headings, primary text */
  --soft: #3d3832;    /* body paragraphs */
  --muted: #6b645b;   /* secondary text */
  --line: rgba(22, 19, 15, 0.12);
  --card: #ffffff;
  /* One accent per team, dark enough to read on white (4.5:1 or better) */
  --ember: #b84d1c;   /* Research */
  --crimson: #b8322a; /* Risk */
  --teal: #1d7a61;    /* Development */
  --amber: #9a6a12;   /* Marketing, gold highlights */
  /* Bright gold for decoration only (too light for text) */
  --gold: #d9a441;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; }

/* ---------- Background: soft gold and red washes + paper grain ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  filter: blur(100px);
  opacity: 0.35;
}
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: drift 28s ease-in-out infinite alternate;
}
.blob-1 { width: 55vw; height: 40vw; left: -10vw; top: 5vh; background: radial-gradient(circle, #f2a08a 0%, transparent 65%); }
.blob-2 { width: 50vw; height: 45vw; right: -12vw; top: -5vh; background: radial-gradient(circle, #f3cf7f 0%, transparent 65%); animation-delay: -8s; animation-duration: 34s; }
.blob-3 { width: 60vw; height: 35vw; left: 20vw; bottom: -15vh; background: radial-gradient(circle, #f6dca0 0%, transparent 65%); animation-delay: -14s; }
.blob-4 { width: 35vw; height: 30vw; right: 10vw; top: 40vh; background: radial-gradient(circle, #f0b89a 0%, transparent 60%); animation-delay: -20s; animation-duration: 40s; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, 4vh) scale(1.12); }
  100% { transform: translate(-4vw, -3vh) scale(0.95); }
}
/* Keeps the centre of the page clean white behind the text */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 45% 50%, rgba(253,252,249,.9) 0%, transparent 60%);
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  html { scroll-behavior: auto; }
}