/* Design tokens for this site: light glass in blue, light grey, and white.

   Style only with `var(--token)`: no hard-coded colors, font sizes, radii, spacing, shadows, or durations.
   Contents are custom properties only (no selectors besides :root), so loading the file has no side effects.

   Layers:
   - Content layer: opaque or lightly translucent surfaces (--surface, --surface-inset). No blur.
   - Functional layer: glass (--material-*) for the sign-in card, buttons, toolbars, and map controls.

   Light mode only: this file does not follow prefers-color-scheme.
   Accessibility switches handled here:
   - prefers-contrast: more (stronger edges and labels),
     prefers-reduced-transparency (opaque), @supports not backdrop-filter (near opaque),
     prefers-reduced-motion (no animation). */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------ palette (reference values) */
  --sys-white: #ffffff;
  --sys-blue: #006cdb;          /* Fill for primary actions: white text on it is above 4.5:1. */
  --sys-blue-deep: #0062c9;     /* Blue text and links on light surfaces. */
  --sys-blue-light: #6fb8ff;    /* Lighter blue, for fills that sit on a blue field. */
  --sys-grey-1: #f5f8fd;
  --sys-grey-2: #e3ebf6;
  --sys-grey-3: #c7d3e4;
  --sys-grey-4: #8d9bb0;
  --sys-grey-5: #52627a;
  --sys-grey-6: #3a4a60;
  --sys-grey-7: #1c2a42;
  --sys-grey-8: #0d1a2f;

  /* RGB channels, so alpha can be applied with rgb(var(--x) / 0.5). */
  --blue-rgb: 0 108 219;
  --ink-rgb: 16 36 70;          /* Blue-grey ink used for fills, separators and shadows. */
  --glass-rgb: 255 255 255;     /* Base color of glass and surfaces. */
  --thumb-rgb: 255 255 255;     /* Selected tab and segmented thumb. */

  /* ------------------------------------------------------------ semantic colors (light) */
  --backdrop:
    radial-gradient(70rem 42rem at 8% -8%, rgb(10 132 255 / 0.20), transparent 60%),
    radial-gradient(60rem 40rem at 100% 100%, rgb(94 176 255 / 0.22), transparent 55%),
    linear-gradient(165deg, #f5f8fd 0%, #e4ecf7 52%, #dbe6f4 100%);
  --bg: #e4ecf7;                /* Solid color under the backdrop, also used for iframes. */
  --label: #0c1626;
  --label-2: #45546a;
  --label-3: #465670;
  --accent: var(--sys-blue-deep);        /* Blue for text, links, icons and selected states. */
  --accent-fill: var(--sys-blue);        /* Blue for filled primary actions. */
  --accent-fill-hover: #0060c4;
  --accent-contrast: #ffffff;            /* Text on --accent-fill. */
  --accent-soft: rgb(0 108 219 / 0.14);

  --fill: rgb(var(--ink-rgb) / 0.07);
  --fill-strong: rgb(var(--ink-rgb) / 0.13);
  --state-hover: rgb(var(--ink-rgb) / 0.06);
  --state-pressed: rgb(var(--ink-rgb) / 0.12);
  --separator: rgb(var(--ink-rgb) / 0.14);
  --field: rgb(255 255 255 / 0.78);      /* Text input background. */
  --field-border: rgb(var(--ink-rgb) / 0.54);

  /* Status colors: text on glass and surfaces (>= 4.5:1), and dot fills (with an icon, never color alone). */
  --ok: #166a2e;
  --bad: #c4001a;
  --warn: #8f4300;
  --dot-ok: #1f9d46;
  --dot-bad: #d92d20;
  --dot-warn: #c96a00;
  --dot-idle: #6b7b92;
  --dot-icon: #ffffff;

  /* Data visualisation: blue and grey family (also readable for color-blind people through lightness steps). */
  --chart-1: #006cdb;
  --chart-2: #5eb0ff;
  --chart-3: #52627a;
  --chart-4: #8d9bb0;
  --chart-5: #003f8a;
  --chart-6: #c7d3e4;
  --map-track: #0a6cdc;
  --map-start: #1f9d46;
  --map-end: #d92d20;
  --map-marker-ring: #ffffff;
  --map-tile-filter: none;

  /* Home tiles: glass tinted blue, grey or white. */
  --tile-blue: linear-gradient(160deg, rgb(64 156 255 / 0.95), rgb(0 92 190 / 0.95));
  --tile-blue-fg: #ffffff;
  --tile-grey: linear-gradient(160deg, rgb(255 255 255 / 0.9), rgb(190 204 224 / 0.9));
  --tile-grey-fg: #3a4a60;
  --tile-white: linear-gradient(160deg, rgb(255 255 255 / 0.98), rgb(236 243 252 / 0.92));
  --tile-white-fg: #0062c9;
  --tile-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 52%);

  /* ------------------------------------------------------------ glass materials */
  --glass-alpha-regular: 0.58;
  --glass-alpha-thick: 0.80;    /* Text heavy surfaces: sidebar, popovers, overlay cards. */
  --glass-alpha-clear: 0.32;    /* Only above rich media. */
  --surface-alpha: 0.86;        /* Content layer surfaces: no blur. */
  --sheen-a: 0.60;              /* Top specular sheen. */
  --blur-regular: saturate(180%) blur(24px);
  --blur-thick: saturate(170%) blur(36px);
  --blur-clear: saturate(140%) blur(12px);

  --material-regular:
    linear-gradient(180deg, rgb(255 255 255 / var(--sheen-a)) 0%, rgb(255 255 255 / 0) 60%),
    rgb(var(--glass-rgb) / var(--glass-alpha-regular));
  --material-thick:
    linear-gradient(180deg, rgb(255 255 255 / var(--sheen-a)) 0%, rgb(255 255 255 / 0) 45%),
    rgb(var(--glass-rgb) / var(--glass-alpha-thick));
  --material-clear:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--sheen-a) * 0.7)) 0%, rgb(255 255 255 / 0) 70%),
    rgb(var(--glass-rgb) / var(--glass-alpha-clear));
  --material-thumb:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--sheen-a) * 0.8)) 0%, rgb(255 255 255 / 0) 100%),
    rgb(var(--thumb-rgb) / 0.92);
  --material-tint:
    linear-gradient(180deg, rgb(255 255 255 / 0.30) 0%, rgb(255 255 255 / 0) 55%),
    rgb(var(--blue-rgb) / 0.96);
  --material-tint-hover:
    linear-gradient(180deg, rgb(255 255 255 / 0.36) 0%, rgb(255 255 255 / 0) 55%),
    var(--accent-fill-hover);
  --surface: rgb(var(--glass-rgb) / var(--surface-alpha));
  --surface-inset: rgb(var(--ink-rgb) / 0.06);

  /* Specular edges: a 1px inner light edge plus a faint outer hairline. */
  --edge-glass:
    inset 0 1px 0 rgb(255 255 255 / 0.90),
    inset 0 -1px 0 rgb(255 255 255 / 0.30),
    inset 0 0 0 1px rgb(255 255 255 / 0.40);
  --edge-tint:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.18);
  --edge-outline: 0 0 0 0.5px rgb(var(--ink-rgb) / 0.12);
  --edge-surface: inset 0 0 0 0.5px rgb(var(--ink-rgb) / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.7);

  --shadow-1: 0 1px 2px rgb(var(--ink-rgb) / 0.06), 0 2px 8px rgb(var(--ink-rgb) / 0.05);
  --shadow-2: 0 1px 2px rgb(var(--ink-rgb) / 0.06), 0 6px 20px rgb(var(--ink-rgb) / 0.10), 0 18px 40px -12px rgb(var(--ink-rgb) / 0.14);
  --shadow-3: 0 2px 4px rgb(var(--ink-rgb) / 0.08), 0 12px 32px rgb(var(--ink-rgb) / 0.16), 0 32px 64px -16px rgb(var(--ink-rgb) / 0.22);
  --shadow-tint: 0 1px 2px rgb(0 60 140 / 0.25), 0 6px 16px rgb(0 98 201 / 0.30);

  /* Focus: a 3px ring outside the control, 3:1 or more against glass and surfaces. */
  --focus-color: #0062c9;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ------------------------------------------------------------ typography (HIG type scale) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-caption: 0.75rem;        /* 12px: smallest text allowed (HIG minimum 11pt). */
  --fs-footnote: 0.8125rem;     /* 13px */
  --fs-body: 0.9375rem;         /* 15px */
  --fs-callout: 1rem;           /* 16px */
  --fs-headline: 1.0625rem;     /* 17px */
  --fs-title-3: 1.25rem;        /* 20px */
  --fs-title-2: 1.375rem;       /* 22px */
  --fs-title-1: 1.75rem;        /* 28px */
  --fs-large-title: 2.125rem;   /* 34px */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.2;
  --lh-title: 1.25;
  --lh-body: 1.4;
  --lh-relaxed: 1.5;
  --tracking-title: 0.01em;
  --tracking-caps: 0.02em;

  /* ------------------------------------------------------------ spacing: 8-pt grid with a 4 half step */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --hairline: 0.5px;
  --border: 1px;

  /* ------------------------------------------------------------ shape: continuous, concentric corners.
     An inner radius is the outer radius minus the padding between them. */
  --radius-xs: 6px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-capsule: 999px;
  --radius-tile: 22.37%;        /* App icon superellipse approximation. */

  /* ------------------------------------------------------------ sizes */
  --target: 44px;               /* Minimum hit target. */
  --control-h: 44px;
  --control-h-compact: 36px;    /* Visual height of compact controls; their hit area is still --target. */
  --topbar-h: 56px;
  --chrome-inset: 8px;          /* Gap between the floating bar and the window edge. */
  --chrome-h: 72px;             /* Space the content reserves under the floating bar (bar + both gaps). */
  --icon-s: 14px;
  --icon-m: 16px;
  --icon-l: 20px;
  --icon-xl: 44px;
  --close-size: 28px;           /* Visual size of the tab close button; hit area is --target. */
  --chevron-size: 6px;
  --accent-bar: 4px;            /* Selection bar on list rows (shape, not color alone). */
  --tile-size: 88px;
  --dot-size: 18px;
  --dot-glyph: 11px;
  --progress-h: 8px;
  --switch-w: 51px;
  --switch-h: 31px;
  --switch-thumb: 27px;
  --switch-pad: 2px;
  --page-max: 960px;
  --home-max: 840px;
  --app-tile-min: 120px;
  --sidebar-w: 224px;
  --sidebar-w-narrow: 188px;
  --list-w-min: 280px;
  --list-w-max: 360px;
  --list-w-min-narrow: 240px;
  --list-w-max-narrow: 320px;
  --list-row-h: 56px;
  --metric-min: 150px;
  --map-h: 320px;
  --raw-max-h: 420px;
  --empty-min-h: 240px;
  --empty-text-max: 36ch;
  --tooltip-max-w: 280px;
  --split-row-min: 220px;

  --readout-min-w: 148px;
  --readout-max-w: 220px;
  --profile-h: 64px;

  --z-map: 0;
  --z-overlay: 700;             /* Above the Leaflet panes (400 to 650), below its controls. */
  --z-bar: 10;
  --z-toast: 50;

  /* ------------------------------------------------------------ motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --dur-fast: 0.15s;
  --dur-med: 0.25s;
  --dur-slow: 0.4s;
  --dur-pulse: 1.2s;
  --scale-hover: 1.04;
  --scale-press: 0.97;
}

/* ---------------------------------------------------------------- increase contrast */
@media (prefers-contrast: more) {
  :root {
    --label-2: var(--label);
    --label-3: var(--label);
    --separator: rgb(var(--ink-rgb) / 0.55);
    --field-border: rgb(var(--ink-rgb) / 0.70);
    --fill: rgb(var(--ink-rgb) / 0.14);
    --fill-strong: rgb(var(--ink-rgb) / 0.24);
    --state-hover: rgb(var(--ink-rgb) / 0.14);
    --glass-alpha-regular: 0.90;
    --glass-alpha-thick: 0.96;
    --surface-alpha: 1;
    --sheen-a: 0;
    --edge-glass: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.65);
    --edge-tint: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.65);
    --edge-outline: 0 0 0 1px rgb(var(--ink-rgb) / 0.55);
    --edge-surface: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.55);
    --focus-width: 4px;
  }
}

/* ---------------------------------------------------------------- reduce transparency: opaque, no blur */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-alpha-regular: 1;
    --glass-alpha-thick: 1;
    --glass-alpha-clear: 1;
    --surface-alpha: 1;
    --blur-regular: none;
    --blur-thick: none;
    --blur-clear: none;
    --backdrop: linear-gradient(165deg, var(--bg), var(--bg));
  }
}

/* ---------------------------------------------------------------- engines without backdrop-filter: near opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-alpha-regular: 0.94;
    --glass-alpha-thick: 0.97;
    --glass-alpha-clear: 0.86;
    --blur-regular: none;
    --blur-thick: none;
    --blur-clear: none;
  }
}

/* ---------------------------------------------------------------- reduce motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-med: 0s;
    --dur-slow: 0s;
    --dur-pulse: 0s;
    --scale-hover: 1;
    --scale-press: 1;
  }
}