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

  Source: Fusion's verified brand kit, brand-kit/dr-ceuracle/brand-identity.md (21 Oct 2026).
  - Colours: the kit's brand navy #0A2E3E and coral-red #EE394D. Both are marked
    "to be confirmed by the brand owner". The lighter tints below are derived from the navy.
  - Fonts: MISSING in the kit (no typeface names or files). The two fonts here are interim
    choices for this site, not the brand's fonts. Replace them when the brand supplies its own.
  - Logo: not used. Its usage rights are unconfirmed (see config.js, brand.logo).

  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.
*/

/* Interim fonts (brand fonts MISSING), self-hosted, SIL Open Font License */
@font-face {
  font-family: "Hahmlet";
  src: url("fonts/hahmlet-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type */
  --font-display: "Hahmlet", Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 300;

  /* Colour: brand values from the kit (to be confirmed by the brand owner) */
  --color-brand: #0a2e3e;      /* brand navy: buttons, chosen answers, result panel, text */
  --color-accent: #ee394d;     /* brand coral-red: progress, focus ring, list markers, large text only */

  /* Colour: neutrals derived from the navy */
  --color-brand-deep: #061f2a; /* pressed buttons */
  --color-paper: #fcfdfd;      /* page background */
  --color-backdrop: #edf1f3;   /* behind product photos, quiet panels */
  --color-ink: #0a2e3e;        /* main text (the brand navy) */
  --color-ink-soft: #4f6873;   /* secondary text */
  --color-line: #d9e1e5;       /* hairlines */
  --color-on-brand: #ffffff;   /* text on the brand navy */

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