/* css/variables.css
   Every colour, font and spacing value used on the site lives here.
   Change a value once and the whole site follows. Colours were sampled from
   TCTI's own certificate design so the website and the certificates match. */
:root {
  /* Brand colours */
  --navy-900: #082860;      /* deepest blue: hero, footer */
  --navy-700: #083890;      /* certificate title blue: headings, buttons */
  --blue-500: #1850b0;      /* lighter blue: links, accents */
  --gold-500: #e88800;      /* certificate gold: highlights, call-to-action */
  --gold-100: #fff3d6;      /* pale gold: soft backgrounds */
  --green-dot: #b8e0b0;     /* the world-map dots on the certificate */

  /* Neutrals (slightly blue so they sit well next to the brand blue) */
  --ink: #0f1b33;
  --muted: #53607a;
  --line: #dce3f0;
  --bg: #ffffff;
  --bg-soft: #f3f6fb;

  /* Status colours for the verify page */
  --ok: #14703f;
  --ok-bg: #e3f4ea;
  --warn: #8a5300;
  --warn-bg: #fff0d0;
  --bad: #9a3412;
  --bad-bg: #fdebdd;

  /* Placeholder highlight (content still to be supplied by TCTI) */
  --ph-bg: #fff1c2;
  --ph-ink: #7a4a00;

  /* Fonts */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Spacing and shape */
  --gutter: 16px;
  --max-width: 1160px;
  --radius: 6px;
  --space-section: clamp(48px, 7vw, 88px);
  --shadow: 0 18px 36px -16px rgba(8, 40, 96, 0.35);
}