/*
 * Fortis brand tokens.
 *
 * Values are taken verbatim from the custom properties published on
 * https://fortisbatterycare.eu/ so this app and the public site stay in step.
 * If the site's palette changes, re-copy these rather than eyeballing.
 */
:root {
  --purple-50:  #F4F0FA;
  --purple-100: #E7DEF5;
  --purple-200: #CBB8E8;
  --purple-300: #A98FD6;
  --purple-500: #5E369E;  /* primary */
  --purple-600: #4E2C83;  /* primary hover */
  --purple-700: #3E2268;
  --purple-900: #2A184A;

  --orange-500: #FF8000;  /* accent — used sparingly, as on the site */

  --ink:        #1A1523;
  --ink-muted:  #55506B;
  --line:       #E3E0EA;
  --surface:    #FFFFFF;
  --surface-alt:#FAF9FC;

  --on-purple:       #FFFFFF;
  --on-purple-muted: #E0D6F2;

  --focus-on-light: #3E2268;
  --focus-on-dark:  #FFB020;

  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(26,21,35,.06), 0 4px 12px rgba(26,21,35,.06);
  --shadow-2: 0 2px 4px rgba(26,21,35,.08), 0 12px 28px rgba(94,54,158,.14);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html, body {
  font-family: var(--font);
  color: var(--ink);
}

/* App chrome ------------------------------------------------------------- */

/* The wordmark in each page header. Height is fixed so the header doesn't
   reflow while the PNG loads. */
.fortis-logo {
  height: 22px;
  width: auto;
  display: block;
}

/* "Dispatch" set next to the wordmark — the product name, not the company. */
.fortis-product {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Thin accent rule under the header, mirroring the orange keyline on the
   site's logo. */
.fortis-header {
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 -2px var(--orange-500);
}

/* Keyboard focus, matching the site's focus treatment. */
:focus-visible {
  outline: 2px solid var(--focus-on-light);
  outline-offset: 2px;
}

/* Leaflet popups pick up the brand type rather than the library default. */
.leaflet-container {
  font-family: var(--font);
}