/* ============================================================
   BASE: brand tokens from the Figma brand kit.
   Change brand colours, fonts and spacing ONLY in this file.
   ============================================================ */
:root {
  /* Colours */
  --yellow: #FCBE05;        /* brand yellow */
  --black: #000000;         /* brand black */
  --white: #FFFFFF;
  --cream: #FBF8F1;         /* PROPOSAL: start-screen background (cream/off-white) */

  /* Fonts */
  --font-heading: "Blinker", system-ui, sans-serif;   /* Blinker Bold 700 */
  --font-body: "Blinker", system-ui, sans-serif;      /* Blinker Regular 400 */
  --font-accent: "Chathura", "Blinker", sans-serif;   /* Chathura Extra Bold 800, large accents only */

  /* Spacing scale (8 pt base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px;

  /* Lines */
  --line-thin: 1px;
  --line-bold: 2px;

  /* Motion */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Rule: never yellow text on white or cream (contrast too low). */

/* Respect visitors who turn motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}