/* Hone colour tokens — the single source of truth for brand colour.
   Source: Hone Style Guide (HONE COLOUR PALETTE). Imported by styles.css.
   Illustration colours are for illustrations/spot graphics ONLY — never for UI text,
   buttons, or surfaces. */
:root {
  /* Primary palette */
  --hone-red: #FF5252;         /* Primary Red — the brand accent. Buttons, links, the logo. */
  --hone-navy: #192030;        /* Primary Navy — darkest surface / primary text on light. */
  --hone-grey: #DAE3EF;        /* Primary Grey — light surface, cards, dividers on white. */
  --hone-navy-medium: #303E54; /* Medium Navy — secondary dark surface. */
  --hone-slate: #516777;       /* Slate Grey — muted text, captions, icon strokes. */
  --hone-error: #CE2424;       /* Error Red — validation/error states only (distinct from brand red). */

  /* Illustration-only palette (do NOT use for UI/text/surfaces) */
  --hone-illustration-yellow: #FFDE50;
  --hone-illustration-teal: #6FDDDD;
  --hone-illustration-blue: #4848E0;

  /* Neutrals */
  --hone-white: #FFFFFF;
  --hone-black: #000000;

  /* Semantic aliases — prefer these in UI code */
  --hone-bg: var(--hone-white);
  --hone-bg-subtle: var(--hone-grey);
  --hone-bg-inverse: var(--hone-navy);
  --hone-surface: var(--hone-white);
  --hone-text: var(--hone-navy);
  --hone-text-muted: var(--hone-slate);
  --hone-text-inverse: var(--hone-white);
  --hone-accent: var(--hone-red);
  --hone-accent-contrast: var(--hone-white);
  --hone-border: var(--hone-grey);
  --hone-focus-ring: var(--hone-red);
}