/*
 * MOTsure — Base CSS
 * Design tokens, reset, typography.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,400&display=swap');

:root {
  /* Brand */
  --ms-navy:        #002366;
  --ms-navy-dark:   #001540;
  --ms-navy-mid:    #003087;
  --ms-navy-light:  #1a4db5;
  --ms-red:         #CC0000;
  --ms-red-dark:    #990000;
  --ms-red-light:   #e60000;

  /* UK number plate */
  --ms-plate-bg:    #F5D400;
  --ms-plate-text:  #000000;

  /* Neutrals */
  --ms-white:       #ffffff;
  --ms-bg:          #f8f9fb;
  --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 */
  --ms-font:        'Inter', system-ui, -apple-system, 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 */
  --ms-shadow-xs:  0 1px 3px rgba(0,0,0,.06);
  --ms-shadow-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --ms-shadow-md:  0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --ms-shadow-lg:  0 8px 32px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05);

  /* 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; }