/* --- Reset / normalise --- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Base tokens --- */
:root {
  --font-sans: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text: var(--colour-light-900);
  --muted-1: var(--colour-light-700);
  --muted-2: var(--colour-light-500);
  --muted-3: var(--colour-light-400);
  --bg: var(--colour-light-0);
  --surface: var(--colour-light-100);
  --border: var(--colour-light-200);
  --accent: var(--colour-blue);
  --max-w: 72ch;
  --muted: var(--muted-1); /* Default mapped muted */

  /* Greyscale ramp (Light → Dark) */
  --colour-light-0:   #ffffff;
  --colour-light-100: #f8f8f8;
  --colour-light-200: #dddee1;
  --colour-light-400: #b7b9be;
  --colour-light-500: #8d8f96;
  --colour-light-700: #505258;
  --colour-light-900: #1e1f21;
  --colour-light-1000:#000000;

/* Dark ramp (inverted equivalents) */
  --colour-dark-0:   #000000;  /* darkest background */
  --colour-dark-100: #1E1F21;
  --colour-dark-200: #3D3F43;
  --colour-dark-400: #64666B;
  --colour-dark-500: #7F8187;
  --colour-dark-700: #A9ABAF;
  --colour-dark-900: #CECFD2;
  --colour-dark-1000:#FFFFFF;  /* brightest text */

  /* Brand / accent */
  --colour-blue: #0101ff;
  --colour-dark-blue: #8181FF;
}

/* Dark theme context */
.dark {
  --text: var(--colour-dark-1000);
  --muted-1: var(--colour-dark-700);
  --muted-2: var(--colour-dark-500);
  --muted-3: var(--colour-dark-400);
  --muted: var(--muted-1);   /* Default muted */
  --bg: var(--colour-dark-0);
  --surface: var(--colour-dark-100);
  --border: var(--colour-dark-200);
  --accent: var(--colour-dark-blue);
}


/* --- Base elements --- */

/* --- Fluid typography baseline --- */
html {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); /* 16 → 24px fluidly */
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  font-weight: 400; /* regular */
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.2;}
p + p { margin-top: var(--space-m); }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
ul, ol { padding-left: 1.25rem; }
code, pre { font-family: var(--font-mono); }

/* Base link style */
a {
  color: var(--colour-text);                 /* same colour as surrounding text */
  text-decoration: underline;
  text-decoration-color: var(--colour-blue); /* blue underline */
  text-underline-offset: 0.2em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease,
    opacity 0.2s ease;
}

/* Hover / focus */
a:hover,
a:focus {
  color: var(--colour-blue);                 /* text becomes blue */
  text-decoration-color: var(--colour-blue);
}



/* Makes content invisible visually but still accessible to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}