/*
  The design system, lifted from docs/house-of-light-preview.html.
  These custom properties are the system — change them here, nowhere else.
*/

:root {
  --void: #08090A;
  --carbon: #111316;
  --panel: #16191D;
  --ash: #24282D;
  --edge: #2E333A;
  --dim: #767E88;
  --mid: #A8AFB8;
  --filament: #F5EEE0;
  --warm: 236, 176, 92;

  /* The dev-only payment bypass banner/controls. Deliberately outside the candle-warm
     ramp above, so it can never be mistaken for real campaign UI. */
  --dev: #6FD8C9;
  --dev-dim: rgba(111, 216, 201, 0.10);
  --dev-line: rgba(111, 216, 201, 0.35);

  /* The one deliberate "success" green — the succeeded-donation status pill. Muted and
     desaturated so it sits quietly beside the candle-warm palette instead of clashing;
     everything else on this app is strictly black-and-white + candle-warm. */
  --ok: #6FA37D;
  --ok-dim: rgba(111, 163, 125, 0.10);
  --ok-line: rgba(111, 163, 125, 0.35);

  /* candle ramp: guttering ember through to the hot white core of a flame */
  --f1: #6E3A10;
  --f2: #95530F;
  --f3: #BD7418;
  --f4: #DB9935;
  --f5: #EFBB66;
  --f6: #F8D89B;
  --f7: #FDEFCF;

  /* the centre's name sits in its own face — swap this one line to match their brand */
  --orgface: 'Newsreader', Georgia, serif;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1120px;
  --gutter: 28px;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--mid);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Grows to absorb any leftover viewport height, so the footer sits at the bottom
   of the screen on a short page (the give form, for one) instead of riding up with
   a gap underneath it — on a normal, tall page there's no slack to absorb and this
   has no effect. */
body > main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

/* Nothing moves for anyone who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}