/* ==========================================================================
   base.css — reset, document defaults, and brand tokens.
   Change the brand colours here to re-theme the whole tour.
   ========================================================================== */

:root {
  /* ── Brand colours ───────────────────────────────────────────────────────*/
  --color-green: #94BD29;
  --color-green-rgb: 148 189 41;
  --color-mint: #7DB876;
  --color-mint-rgb: 125 184 118;
  --color-blue: #3EABD0;
  --color-blue-rgb: 62 171 208;

  /* ── Semantic aliases ────────────────────────────────────────────────────*/
  --brand-primary: var(--color-blue);
  --brand-primary-rgb: var(--color-blue-rgb);
  --brand-dark: var(--color-green);
  --brand-dark-rgb: var(--color-green-rgb);

  /* ── Oleon brand colour (used for text, UI elements) ─────────────────────*/
  --color-oleon: #004876;
  --color-oleon-rgb: 0 72 118;

  /* ── Derived tokens ──────────────────────────────────────────────────────*/
  --brand-gradient: linear-gradient(135deg, var(--color-green) 0%, var(--color-mint) 50%, var(--color-blue) 100%);
  --loader-gradient: linear-gradient(135deg, #173643 0%, #004876 100%);

  --font-sans: 'museo-sans', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-sans);
}