/* KidStudy brand: the wordmark, the colours each subject wears, and Kobi the koala.
   Shared by every page; docs/brand.md explains how to use them. */

@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --ks-blue: #2f5fb3;    /* KidStudy's own colour: links, main buttons, the app icon */
  --ks-writing: #f08a24; /* orange */
  --ks-reading: #1f9d55; /* green */
  --ks-maths: #7b4fd6;   /* purple */
  --ks-science: #0fa3a3; /* teal */
  --ks-geography: #b5532a; /* terracotta */
  --ks-coding: #2b8fd6;  /* sky blue */
  --ks-health: #e0457b;  /* pink */
  --ks-history: #8a6a3b; /* bronze */
  --ks-music: #c43aa8;   /* magenta */
  --ks-sun: #e5a50a;     /* stars and praise */
  --ks-brand-font: 'Fredoka', system-ui, sans-serif;
}

/* The logo: Kobi's face in a blue circle, then "KidStudy" with Study in the subject colours. */
.brand { display: inline-flex; align-items: center; gap: 0.35em; color: inherit; text-decoration: none; }
.brand-mark { width: 1.6em; height: 1.6em; flex: none; border-radius: 50%; background: var(--ks-blue) url('../icons/icon-192.png') center / cover; box-shadow: 0 0.06em 0.18em rgb(29 36 51 / 0.2); }
.wordmark { font: 600 1em/1 var(--ks-brand-font); letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .kid { color: var(--ks-blue); }
.wordmark .s1 { color: var(--ks-writing); }
.wordmark .s2 { color: var(--ks-reading); }
.wordmark .s3 { color: var(--ks-maths); }
.wordmark .s4 { color: var(--ks-science); }
.wordmark .s5 { color: var(--ks-sun); }