/* Design tokens: fonts, colour and type.

   Colour values are the Australian Desert palette. Only the tokens this
   site uses are included. Shapes and button fills keep the brand
   primary; coloured text uses --text-accent, because #C94B1A as normal size
   text is under 4.5:1 on the base in both modes. */

/* Latin subsets of two variable fonts, both under the SIL Open Font License
   (licence text alongside each file). Preloaded from the layout and cached a
   year by the /assets/fonts/* rule in _headers. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish-latin-var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The display stack falls straight back to sans-serif, not through Mulish,
     so headings repaint once at most while the fonts load. */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Mulish', sans-serif;

  /* Shape colours: the same in both modes. */
  --shape-1: #C94B1A; /* brand primary */
  --shape-2: #D48B0A; /* brand accent */
  --shape-3: #E0A96A; /* brand tint */

  --button-fill: #C94B1A;
  --button-label: #FFFFFF; /* 4.66:1 on the fill */
}

/* Light is the default, so :root carries it as well. The inline head script
   sets data-mode before first paint. */
:root,
html[data-mode="light"] {
  color-scheme: light;
  --base: #FAF4EC;
  --surface: #F2E7D5;
  --border-subtle: #DEC9A8;
  --text-primary: #1A0F06;   /* 17.24:1 on base */
  --text-secondary: #5C3A24; /* 9.21:1 on base */
  --text-muted: #845F44;     /* 5.19:1 on base */
  --text-accent: #B33F12;    /* Desert --brand-primary-hover, 5.28:1 on base */
}

html[data-mode="dark"] {
  /* Keep in sync with the no-JS dark block below. */
  color-scheme: dark;
  --base: #130A04;
  --surface: #1F1009;
  --border-subtle: #3D2214;
  --text-primary: #F5EBDA;   /* 16.57:1 on base */
  --text-secondary: #C9A06A; /* 8.13:1 on base */
  --text-muted: #AF7A52;     /* 5.34:1 on base */
  --text-accent: #DA5A26;    /* Desert --brand-primary-hover, 5.10:1 on base */
}

/* No JavaScript, so no data-mode: follow the system setting. */
@media (prefers-color-scheme: dark) {
  html:not([data-mode]) {
    /* Keep in sync with html[data-mode="dark"] above. */
    color-scheme: dark;
    --base: #130A04;
    --surface: #1F1009;
    --border-subtle: #3D2214;
    --text-primary: #F5EBDA;
    --text-secondary: #C9A06A;
    --text-muted: #AF7A52;
    --text-accent: #DA5A26;
  }
}