/*
 * WhenMOT — Base CSS
 * Design tokens, reset, typography.
 * Part of the When Network (see whenbin.co.uk) — same system, own accent colours.
 */

:root {
  /* Brand — Union Jack navy & red */
  --ms-navy:        #012169;
  --ms-navy-dark:   #00113d;
  --ms-navy-mid:    #0a2f8c;
  --ms-navy-light:  #2952cc;
  --ms-red:         #c8102e;
  --ms-red-dark:    #9c0c24;
  --ms-red-light:   #e2274a;

  /* UK number plate (real plate colours — not a brand colour) */
  --ms-plate-bg:    #F5D400;
  --ms-plate-text:  #000000;

  /* Neutrals */
  --ms-white:       #ffffff;
  --ms-bg:          #f1f5fc;
  --ms-grey-50:     #f4f5f7;
  --ms-grey-100:    #eaecf0;
  --ms-grey-200:    #d9dde5;
  --ms-grey-400:    #9aa3b2;
  --ms-grey-600:    #5c6578;
  --ms-grey-800:    #2d3342;
  --ms-grey-900:    #181d28;

  /* Status */
  --ms-pass:        #15803d;
  --ms-pass-bg:     #f0fdf4;
  --ms-pass-border: #bbf7d0;
  --ms-fail:        #b91c1c;
  --ms-fail-bg:     #fff1f1;
  --ms-fail-border: #fecaca;
  --ms-warn:        #92400e;
  --ms-warn-bg:     #fffbeb;
  --ms-warn-border: #fde68a;

  /* Typography — system font stack (matches the When Network house style) */
  --ms-font:        -apple-system, "system-ui", "Segoe UI", sans-serif;
  --ms-font-plate:  'UKNumberPlate', 'Charles Wright', Impact, sans-serif;

  /* Scale */
  --ms-text-xs:   0.6875rem;  /* 11px */
  --ms-text-sm:   0.8125rem;  /* 13px */
  --ms-text-base: 0.9375rem;  /* 15px */
  --ms-text-md:   1.0625rem;  /* 17px */
  --ms-text-lg:   1.1875rem;  /* 19px */
  --ms-text-xl:   1.375rem;   /* 22px */
  --ms-text-2xl:  1.625rem;   /* 26px */
  --ms-text-3xl:  2rem;       /* 32px */
  --ms-text-4xl:  2.5rem;     /* 40px */
  --ms-text-5xl:  3rem;       /* 48px */

  /* Spacing */
  --ms-sp-1:  0.25rem;
  --ms-sp-2:  0.5rem;
  --ms-sp-3:  0.75rem;
  --ms-sp-4:  1rem;
  --ms-sp-5:  1.25rem;
  --ms-sp-6:  1.5rem;
  --ms-sp-8:  2rem;
  --ms-sp-10: 2.5rem;
  --ms-sp-12: 3rem;
  --ms-sp-16: 4rem;
  --ms-sp-20: 5rem;
  --ms-sp-24: 6rem;

  /* Radii */
  --ms-r-sm:  6px;
  --ms-r-md:  10px;
  --ms-r-lg:  14px;
  --ms-r-xl:  20px;
  --ms-r-pill:9999px;

  /* Shadows — kept light/soft to match an airy, minimal feel */
  --ms-shadow-xs:  0 1px 3px rgba(1,33,105,.05);
  --ms-shadow-sm:  0 2px 8px rgba(1,33,105,.06), 0 1px 3px rgba(1,33,105,.03);
  --ms-shadow-md:  0 4px 18px rgba(1,33,105,.08), 0 2px 6px rgba(1,33,105,.03);
  --ms-shadow-lg:  0 8px 28px rgba(1,33,105,.10), 0 3px 8px rgba(1,33,105,.04);

  /* Transitions */
  --ms-t-fast:   140ms ease;
  --ms-t-normal: 220ms ease;

  /* Layout */
  --ms-max:    940px;
  --ms-gutter: 1.25rem;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ms-font);
  font-size: var(--ms-text-base);
  line-height: 1.6;
  color: var(--ms-grey-800);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--ms-navy);
  text-decoration: none;
  transition: color var(--ms-t-fast);
}
a:hover { color: var(--ms-navy-light); }

h1,h2,h3,h4,h5 {
  font-family: var(--ms-font);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ms-grey-900);
}

p { color: var(--ms-grey-600); line-height: 1.65; }
p + p { margin-top: var(--ms-sp-3); }

:focus-visible { outline: 3px solid var(--ms-navy); outline-offset: 3px; border-radius: 4px; }