/* ====================================================================
   MP Connect theme: Mobility Plus brand standards (revised 7.25.2020)
   Loaded last in every page's <head>, so it can retune each page's own
   colour variables without touching the page's logic.

   Palette (brand sheet)            Role here
   Lighter Red  #AF4A52             lead colour: buttons, active tabs, links
   Logo Red     #CE0E2D             the logo mark only, plus "due now" alarms
   Slate Blue   #3B6E8F             second voice: info, secondary actions, charts
   Red / Gray   #AF9094             soft accent, third chart series
   Dark Gray    #333333             header band, body text
   Black        #000000             headings
   Gray         #999999             decoration only (too light for reading)
   Light Gray   #E4E5E6             lines
   Lighter Gray #EAEFF2             page background
   Type: Montserrat (free stand-in for Proxima Nova), self-hosted.
   ==================================================================== */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/montserrat-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Brand palette */
  --mp-logo: #CE0E2D;
  --mp-rose: #AF4A52;
  --mp-rose-dark: #8A3A41;
  --mp-rose-50: #F7EDEE;
  --mp-rose-100: #EED6D8;
  --mp-mauve: #AF9094;
  --mp-mauve-dark: #7E6265;
  --mp-mauve-50: #F4EEEF;
  --mp-slate: #3B6E8F;
  --mp-slate-dark: #2D5670;
  --mp-slate-50: #E7EFF4;
  --mp-slate-100: #CFDFEA;
  --mp-black: #000000;
  --mp-char: #333333;
  --mp-gray: #999999;
  --mp-muted: #5F6468;            /* readable stand-in for Gray on white (6:1) */
  --mp-line: #E4E5E6;
  --mp-mist: #EAEFF2;
  --mp-white: #FFFFFF;

  /* Status: kept semantic, tuned to sit with the palette */
  --mp-ok: #2F7D5B;   --mp-ok-50: #E5F2EC;
  --mp-warn: #9A6412; --mp-warn-50: #FBF1DE;
  --mp-bad: #B3261E;  --mp-bad-50: #FBE9E7;

  /* Module accent: set per page with <body data-mp="..."> */
  --mp-accent: var(--mp-rose);
  --mp-accent-dark: var(--mp-rose-dark);
  --mp-accent-50: var(--mp-rose-50);

  --mp-font: 'Montserrat', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mp-radius: 12px;
  --mp-radius-sm: 8px;
  --mp-shadow: 0 1px 2px rgba(51, 51, 51, .06), 0 4px 14px rgba(51, 51, 51, .05);

  /* The pages' own colour variables, pointed at the brand palette. */
  --brand: var(--mp-rose);
  --brand-dark: var(--mp-rose-dark);
  --mp-red: var(--mp-rose);
  --mp-red-dark: var(--mp-rose-dark);
  --text: var(--mp-char);
  --ink: var(--mp-char);
  --muted: var(--mp-muted);
  --border: var(--mp-line);
  --line: var(--mp-line);
  --bg: var(--mp-mist);
}

/* Module accents */
body[data-mp="slate"]  { --mp-accent: var(--mp-slate); --mp-accent-dark: var(--mp-slate-dark); --mp-accent-50: var(--mp-slate-50); }
body[data-mp="mauve"]  { --mp-accent: var(--mp-mauve-dark); --mp-accent-dark: #5E494C; --mp-accent-50: var(--mp-mauve-50); }
body[data-mp="char"]   { --mp-accent: var(--mp-char); --mp-accent-dark: #000; --mp-accent-50: var(--mp-mist); }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mp-font);
  color: var(--mp-char);
  background-color: var(--mp-mist);
  font-feature-settings: 'lnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
:where(h1, h2, h3, h4) { color: var(--mp-black); }
:where(a) { color: var(--mp-slate); }
:where(a:hover) { color: var(--mp-slate-dark); }
:where(table, .num, td, th) { font-variant-numeric: tabular-nums lining-nums; }
:where(code, kbd, samp, pre, .mono) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
::selection { background: var(--mp-rose-100); color: var(--mp-black); }
:focus-visible { outline: 2px solid var(--mp-slate); outline-offset: 2px; }

/* ---------- Building blocks pages can use (class="mp-…") ---------- */
.mp-title { font-weight: 800; text-transform: uppercase; letter-spacing: .045em; color: var(--mp-black); }
.mp-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--mp-char); margin: 0 0 10px; }
.mp-card { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; padding: 9px 16px; border-radius: var(--mp-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.mp-btn.primary { background: var(--mp-rose); color: #fff; }
.mp-btn.primary:hover { background: var(--mp-rose-dark); }
.mp-btn.secondary { background: #fff; color: var(--mp-slate); border-color: var(--mp-slate-100); }
.mp-btn.secondary:hover { background: var(--mp-slate-50); border-color: var(--mp-slate); }
.mp-btn.ghost { background: transparent; color: var(--mp-char); }
.mp-btn.ghost:hover { background: var(--mp-mist); }
.mp-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--mp-mist); color: var(--mp-char); }
.mp-pill.rose  { background: var(--mp-rose-50);  color: var(--mp-rose-dark); }
.mp-pill.slate { background: var(--mp-slate-50); color: var(--mp-slate-dark); }
.mp-pill.mauve { background: var(--mp-mauve-50); color: var(--mp-mauve-dark); }
.mp-pill.ok    { background: var(--mp-ok-50);    color: var(--mp-ok); }
.mp-pill.warn  { background: var(--mp-warn-50);  color: var(--mp-warn); }
.mp-pill.bad   { background: var(--mp-bad-50);   color: var(--mp-bad); }

/* The route stripe: the brand's one signature device. Sits under every header. */
.mp-route { height: 5px; background: linear-gradient(90deg, var(--mp-accent) 0 52%, var(--mp-mauve) 52% 70%, var(--mp-slate) 70% 88%, var(--mp-logo) 88% 100%); }
body[data-mp="slate"] .mp-route { background: linear-gradient(90deg, var(--mp-slate) 0 52%, var(--mp-mauve) 52% 70%, var(--mp-rose) 70% 88%, var(--mp-logo) 88% 100%); }
body[data-mp="mauve"] .mp-route { background: linear-gradient(90deg, var(--mp-mauve) 0 52%, var(--mp-rose) 52% 70%, var(--mp-slate) 70% 88%, var(--mp-logo) 88% 100%); }
body[data-mp="char"] .mp-route { background: linear-gradient(90deg, var(--mp-rose) 0 52%, var(--mp-slate) 52% 70%, var(--mp-mauve) 70% 88%, var(--mp-logo) 88% 100%); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { body { background: #fff !important; } .mp-route { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }