/* ============================================================
   Mahuset Design Tokens
   The single source of truth for color, type, spacing and motion.
   Built on top of nhsuk-frontend; overrides NHS blues with Mahuset
   burgundy and swaps NHS sans for Atkinson Hyperlegible + EB Garamond.
   ============================================================ */
@import url("fonts.css");

:root {
  /* ---------- Brand colour ---------- */
  --mh-burgundy-50:  #fbf3f6;   /* tinted background */
  --mh-burgundy-100: #f1d8e2;   /* hover bg on white */
  --mh-burgundy-300: #c66a91;   /* disabled / soft */
  --mh-burgundy-500: #7C2855;   /* primary  — flag, headers, links */
  --mh-burgundy-700: #5a1e3e;   /* hover */
  --mh-burgundy-900: #3a1428;   /* active / pressed */

  /* ---------- Neutrals ---------- */
  --mh-ink:        #212b32;     /* body text */
  --mh-ink-soft:   #4c6272;     /* secondary text */
  --mh-line:       #aeb7bd;     /* hairline border */
  --mh-line-soft:  #d8dde0;     /* card border */
  --mh-surface:    #ffffff;
  --mh-surface-2:  #f0f4f5;     /* tinted panels */
  --mh-surface-3:  #fafafa;     /* showcase preview tray */
  --mh-night:      #121921;     /* footer / dark mode */
  --mh-night-2:    #333333;     /* alt footer */

  /* ---------- Status ---------- */
  --mh-success:    #007f3b;
  --mh-warning:    #ffb81c;
  --mh-error:      #d5281b;
  --mh-info:       var(--mh-burgundy-500);

  /* ---------- Accessibility ---------- */
  --mh-focus:      #ffeb3b;     /* WCAG focus yellow — never repurpose */
  --mh-focus-ink:  var(--mh-ink);

  /* ---------- Typography ---------- */
  --mh-font-sans:    "Atkinson Hyperlegible", Arial, sans-serif;
  --mh-font-display: "EB Garamond", "Times New Roman", serif;
  --mh-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --mh-text-xs:   0.75rem;   /* 12 */
  --mh-text-s:    0.875rem;  /* 14 */
  --mh-text-m:    1rem;      /* 16 */
  --mh-text-l:    1.1875rem; /* 19 */
  --mh-text-xl:   1.5rem;    /* 24 */
  --mh-text-2xl:  2rem;      /* 32 */
  --mh-text-3xl:  2.625rem;  /* 42 */
  --mh-text-4xl:  3.5rem;    /* 56 */

  --mh-leading-tight:  1.15;
  --mh-leading-snug:   1.3;
  --mh-leading-normal: 1.5;

  /* ---------- Spacing (8-pt scale) ---------- */
  --mh-space-1:   4px;
  --mh-space-2:   8px;
  --mh-space-3:  12px;
  --mh-space-4:  16px;
  --mh-space-5:  24px;
  --mh-space-6:  32px;
  --mh-space-7:  48px;
  --mh-space-8:  64px;
  --mh-space-9:  96px;

  /* ---------- Geometry ---------- */
  --mh-radius-s:  4px;
  --mh-radius-m:  8px;
  --mh-radius-l: 12px;

  --mh-shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
  --mh-shadow-focus: 0 0 0 2px var(--mh-focus), 0 4px 0 2px var(--mh-ink);

  /* ---------- Breakpoints (mirroring nhsuk) ---------- */
  --mh-bp-tablet:  40.0625em;
  --mh-bp-desktop: 48.0625em;
  --mh-bp-wide:    64.0625em;

  /* ---------- Motion ---------- */
  --mh-ease:        cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --mh-duration-s:  150ms; /* @kind other */
  --mh-duration-m:  240ms; /* @kind other */
}