/*
  Brand file: colours, fonts and shape for the whole site.

  The look follows the brand website (en.leegeehaam.com): mostly black and white, dark grey
  body text, warm beige behind the product photos, uppercase Montserrat titles, thin large
  statements, and an occasional pink-red accent. Shin Yi (brand lead) has approval to use the
  logo and brand; the logo files are in brand/logo/ (tools/make-logos.mjs).

  Fonts: the brand font is Futura, which has no web licence here yet. Jost (headings) is a free
  near match for it, and Montserrat (text) is what the brand website uses. Both are self-hosted
  from @fontsource-variable 5.3.0 under the SIL Open Font License (licences in fonts/).
  To use Futura once Fusion has a web licence: add its @font-face rules below and put "Futura"
  first in --font-display. The font names live only in this file.

  To change the look: edit the values below and keep the variable names.
  The Story image (js/story.js) reads these same variables, so it follows any change here.
*/

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type */
  --font-display: "Jost", Futura, "Trebuchet MS", Arial, sans-serif;   /* headings */
  --font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;       /* body and small text */
  --display-weight: 300;       /* thin large statements */
  --heading-weight: 400;       /* product names and question text */
  --label-tracking: 0.14em;    /* uppercase titles and labels */

  /* Colour */
  --color-brand: #000000;      /* black: buttons, chosen answers, result panel */
  --color-accent: #cc3366;     /* pink-red, used sparingly: step labels, progress, focus ring, list markers (small text on white only) */
  --color-brand-deep: #333333; /* pressed buttons */
  --color-paper: #ffffff;      /* page background */
  --color-backdrop: #f3eee8;   /* warm beige behind the product photos (cut-outs, never blended) */
  --color-cell: #ffffff;       /* the Buy Now store cells: the stores' own logo files are on white */
  --color-heading: #000000;    /* headings */
  --color-ink: #333333;        /* body text */
  --color-ink-soft: #6b6b6b;   /* secondary text (4.6:1 on the beige, 5.3:1 on white) */
  --color-line: #e3ddd6;       /* hairlines */
  --color-on-brand: #ffffff;   /* text on black */

  /* Shape */
  --radius-button: 0;
  --radius-panel: 0;
}