/* Headroom design system: one set of tokens for the landing page, the live overview, the detailed view and the replay.
   Anchored on the town illustration: its indigo line work (#4C3DA8) is the primary, its blush ground (#F4E6E1)
   the warm surface. Data colours were checked with the dataviz palette validator (CVD-safe, labelled everywhere).
   Type: Plus Jakarta Sans (SIL OFL, self-hosted in ui/fonts). Spacing on a 4 px grid.
   Material: frosted glass. Every page sits on one soft backdrop (indigo, blush and teal light, .hr-backdrop, injected by
   ui/motion.js) and its surfaces are translucent panes over it: --glass for cards, --glass-ink for the indigo KPI cards. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  /* brand */
  --primary: #4C3DA8; --primary-strong: #3B2F86; --primary-soft: #EEEBF9; --on-primary: #FFFFFF;
  --blush: #F4E6E1; --blush-soft: #FAF3F0;
  /* neutrals */
  --page: #F6F2F6; --surface: #FFFFFF; --soft: #F5F3F8; --ink: #1E1B3A; --muted: #67637D; --faint: #9A97AD; --rule: #E9E6F0;
  /* data and state (validated together: grid / limit / backup) */
  --s-grid: #5B4BD6; --s-limit: #1FA8B3; --s-backup: #E8833A; --s-trim: #C9971A; --s-off: #C8444B; --s-neutral: #D9D6E2;
  --s-off-ink: #8F2329; --s-backup-ink: #8A3F0A; --s-trim-ink: #6B4A00;
  /* type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px;
  /* shape and depth */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(30, 27, 58, 0.06);
  --shadow-2: 0 1px 2px rgba(30, 27, 58, 0.05), 0 8px 24px rgba(30, 27, 58, 0.08);
  /* glass: a pane is translucent white over the backdrop, with a bright top edge and a soft indigo shadow */
  --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(255, 255, 255, 0.76); --glass-soft: rgba(255, 255, 255, 0.36);
  --glass-ink: color-mix(in srgb, var(--primary-strong) 24%, rgba(76, 61, 168, 0.84)); --glass-line: rgba(255, 255, 255, 0.72); --glass-rule: rgba(76, 61, 168, 0.10);
  --glass-blur: blur(22px) saturate(165%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(76, 61, 168, 0.06), 0 14px 36px -12px rgba(46, 36, 110, 0.20);
  --glass-shadow-lo: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(76, 61, 168, 0.05), 0 4px 14px -6px rgba(46, 36, 110, 0.14);
  /* layout */
  --container: 1200px; --gutter: max(16px, env(safe-area-inset-left));
  color-scheme: light;
}

/* shared atoms: same buttons, pills and focus ring on every page */
.hr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--fs-base)/1 var(--font);
  padding: 11px 18px; min-height: 40px; border-radius: var(--r-sm); border: 1px solid var(--primary); background: var(--primary);
  color: var(--on-primary); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.08s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(76, 61, 168, 0.7); }
.hr-btn:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.hr-btn:active { transform: translateY(1px); }
.hr-btn.ghost { background: var(--glass); color: var(--ink); border-color: var(--glass-line); box-shadow: var(--glass-shadow-lo);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.hr-btn.ghost:hover { background: var(--glass-strong); border-color: var(--glass-line); }
.hr-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 18px/1 var(--font); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.hr-brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
/* glass atoms. .hr-glass is a card pane; .hr-glass.soft is for large areas behind other panes (less frost, no lift) */
.hr-glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.hr-glass.soft { background: var(--glass-soft); box-shadow: var(--glass-shadow-lo); }

/* the backdrop every pane frosts: three soft lights and two faint power lines (echoing the town) on a blush-lavender
   ground, a fine grain on top.
   motion.js moves each light at its own rate while the page scrolls, so the glass has depth. */
.hr-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--page); }
.hr-backdrop i { position: absolute; border-radius: 50%; will-change: transform; }
.hr-backdrop i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgba(91, 75, 214, 0.40), rgba(91, 75, 214, 0.16) 48%, rgba(91, 75, 214, 0) 100%); }
.hr-backdrop i:nth-child(2) { width: 58vmax; height: 58vmax; right: -20vmax; top: 18vh;
  background: radial-gradient(closest-side, rgba(238, 170, 160, 0.48), rgba(238, 170, 160, 0.2) 48%, rgba(238, 170, 160, 0) 100%); }
.hr-backdrop i:nth-child(3) { width: 46vmax; height: 46vmax; left: 22vw; top: 64vh;
  background: radial-gradient(closest-side, rgba(31, 168, 179, 0.24), rgba(31, 168, 179, 0.09) 48%, rgba(31, 168, 179, 0) 100%); }
.hr-backdrop::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%234C3DA8' stroke-width='2' stroke-opacity='.13'%3E%3Cpath d='M-20 210 Q400 330 820 220 T1640 250'/%3E%3Cpath d='M-20 236 Q400 356 820 246 T1640 276'/%3E%3Cpath d='M-20 640 Q520 790 1060 650 T1640 700'/%3E%3Cpath d='M-20 668 Q520 818 1060 678 T1640 728'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hr-backdrop::after { content: ""; position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hr-glass { background: var(--glass-strong); }
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }