/* Shared tokens + wordmark for the landing page and the app */
:root {
  /* One rounded typeface for the whole platform — landing page, app and wordmark
     alike. Nunito's terminals are soft/rounded rather than cut square, which is
     the point: it reads calm and friendly instead of neutral-corporate. Headings
     and the wordmark lean on its own 800/900 weights instead of a second face. */
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mark: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* "Strawberry milk" — soft strawberry pink with cream, baby blue, lilac and mint.
     Pastel fills are too light for white text or small type, so anything that
     sits ON the accent uses --on-accent (a dark plum), anything that IS accent-
     coloured text or an icon uses --accent-ink (a deeper berry), and keyboard
     focus uses --focus (deeper again, for contrast against white). */
  --accent: oklch(78.6% 0.113 0.1);
  --accent-hover: oklch(75.4% 0.131 0.4);
  --accent-press: oklch(72.1% 0.147 1.2);
  --on-accent: oklch(28.1% 0.091 0.2);
  --accent-ink: oklch(54.3% 0.166 2.0);
  --focus: oklch(60.4% 0.191 1.2);

  /* the seven wordmark letters, in order — deeper than the card pastels so they read on white */
  --wm-1: oklch(67.4% 0.176 2.9);
  --wm-2: oklch(76.8% 0.121 65.8);
  --wm-3: oklch(69.5% 0.120 240.2);
  --wm-4: oklch(63.7% 0.122 302.7);
  --wm-5: oklch(70.9% 0.120 169.6);
  --wm-6: oklch(79.3% 0.151 88.5);
  --wm-7: oklch(62.9% 0.068 349.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

/* Wordmark: chunky, colourful, a little wobbly */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-mark);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
  user-select: none;
}
.wordmark span { display: inline-block; }
.wordmark span:nth-child(1) { color: var(--wm-1); transform: rotate(-8deg) translateY(1px); }
.wordmark span:nth-child(2) { color: var(--wm-2); transform: rotate(6deg); }
.wordmark span:nth-child(3) { color: var(--wm-3); transform: rotate(-5deg) translateY(-1px); }
.wordmark span:nth-child(4) { color: var(--wm-4); transform: rotate(7deg); }
.wordmark span:nth-child(5) { color: var(--wm-5); transform: rotate(-6deg) translateY(1px); }
.wordmark span:nth-child(6) { color: var(--wm-6); transform: rotate(9deg); }
.wordmark span:nth-child(7) { color: var(--wm-7); transform: rotate(-7deg) translateY(-1px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}