/*
  Theme: every colour and font the booth uses. Change this file only to restyle.
  The canvas drawings (scan effect, face drawings) read these same variables.

  Matches the QR quiz (03-web/brand/brand.css), which follows Fusion's verified
  Dr.Ceuracle brand kit (21 Oct 2026). The variable names are the quiz's, so a
  later merge into the quiz as booth mode can drop this file in favour of its.
  - Navy #0A2E3E and coral-red #EE394D come from the kit; both are marked
    "to be confirmed by the brand owner". The tints are derived from the navy.
  - Coral is only for graphics and large text (3.9:1 on white): the scan's
    progress line, the question progress bar, focus rings and list markers.
  - Fonts: the kit has none (MISSING). Hahmlet and Hanken Grotesk are the
    quiz's interim choices, self-hosted here too.
  - Logo: not used; its usage rights are unconfirmed. The name is plain text.
*/

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

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

:root {
  /* Type (as the quiz) */
  --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;      /* navy: buttons, chosen answers, the reading panel, text */
  --color-accent: #ee394d;     /* coral-red: scan progress, question progress, focus, markers */

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

  /* Booth only: the camera screen and the scan */
  --color-guide: #7f97a2;                    /* the oval guide before the face is in place */
  --color-veil: rgba(252, 253, 253, 0.9);    /* milky glass around the oval (also a soft fill light) */
  --color-scan: #ffffff;                     /* points, lines and light drawn over the camera */

  /* Shape (as the quiz) */
  --radius-button: 999px;
  --radius-panel: 0;
}