/* tetha — tokens from the tetha design system (tokens.json); only the six
   Asap Condensed weights this site uses are declared. Font licence: fonts/OFL.txt */
:root, [data-theme="light"] {
  --brand-blue: #0e77a9; /* tetha blue, sampled from the wordmark. Fills: primary buttons, the blue block of the mark (text on it is `on-blue`). Same value in both themes. For blue text use `accent-text`. */
  --brand-green: #69bd45; /* tetha green, sampled from the node dot. Same value in both themes. Accent fills, status dots and highlights. Light: never text or thin lines on `surface` (2.34:1). Dark: legible as text on `surface`, `surface-muted` and `blue-tint` (5.5:1 or better). Text on a green fill is `on-green`. */
  --accent-text: var(--brand-blue); /* Blue text: links, and headings set in blue, on `surface` (light 4.96:1, dark 7.38:1). Light it is exactly `brand-blue`; dark it is lightened, because the brand blue is too dark to read on the dark ground. Light: large text only (24px+) on `surface-muted` and `blue-tint`. */
  --blue-tint: #e7f1f6; /* Soft blue ground for selected rows, callouts and panels. Text on it is `ink` or `ink-muted`. */
  --surface: #ffffff; /* Page and card background. Light: white, the ground of the full-colour logo. Dark: deep ink, the ground of the white logo. */
  --surface-muted: #f4f7f9; /* Secondary background for sections, table headers and inputs. */
  --ink: #1c2a33; /* Body text and icons on `surface`, `surface-muted` and `blue-tint` in both themes. */
  --ink-muted: #5a6870; /* Secondary text, captions and the tagline on `surface`, `surface-muted` and `blue-tint` in both themes (5.0:1 or better). */
  --on-blue: #ffffff; /* Text and icons on a `brand-blue` fill (4.96:1), both themes. */
  --on-green: #1c2a33; /* Text and icons on a `brand-green` fill (6.28:1), both themes. White on green fails contrast; never use it. */
  --hairline: #d5dee3; /* Decorative dividers and card outlines only; not for input borders that must be seen. */
  --focus-ring: var(--accent-text); /* Keyboard focus: a solid 2px ring with a 2px offset, on `surface` and `surface-muted` (4.6:1 or better in both themes). */
  --status-moving: var(--brand-green); /* Vehicle status Moving: a solid disc, on map pins and beside the word "Moving". Always with the word; on light grounds the green is below 3:1 (2.34:1 on `surface`), so the white pin ring and the label carry it. */
  --status-parked: var(--brand-blue); /* Vehicle status Parked: a solid disc with a P, beside the word "Parked" (light 4.96:1, dark 7.38:1 on `surface`). */
  --status-offline: #7d8a92; /* Vehicle status Offline: a hollow ring, beside the word "Offline" and the time last seen (3.5:1 light, 4.8:1 dark on `surface`). */
  --status-waiting: #b37a0f; /* Vehicle status Waiting for tracker: a dashed ring, beside the words "Waiting for tracker", before the tracker first connects. Light 3.5:1, dark 8.8:1 on `surface`. */
}
[data-theme="dark"] {
  --brand-blue: #0e77a9;
  --brand-green: #69bd45;
  --accent-text: #5bb4e0;
  --blue-tint: #163447;
  --surface: #111d25;
  --surface-muted: #1a2a34;
  --ink: #edf2f5;
  --ink-muted: #a3b1ba;
  --on-blue: #ffffff;
  --on-green: #1c2a33;
  --hairline: #2c3d48;
  --focus-ring: var(--accent-text);
  --status-moving: var(--brand-green);
  --status-parked: #5bb4e0;
  --status-offline: #7d8a92;
  --status-waiting: #e8b04a;
}
:root {
  --space-1: 4px; /* Gap between an icon and its label. */
  --space-2: 8px; /* Tight padding inside chips and badges. */
  --space-4: 16px; /* Card and button padding; gaps between related items. */
  --space-6: 24px; /* Gaps between sections and page gutters on mobile. */
  --radius-sm: 4px; /* Inputs, badges. */
  --radius-md: 8px; /* Buttons, cards. */
  --radius-full: 9999px; /* Status dots and avatars — the round node of the mark. */
  --font-sans: "Asap Condensed", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-display: 800 56px/60px var(--font-sans); /* Hero headlines, in `accent-text` or `ink`. Extra Bold, closest to the weight of the wordmark. */
  --text-heading-1: 600 32px/40px var(--font-sans); /* Page titles, SemiBold. */
  --text-heading-2: 700 24px/32px var(--font-sans); /* Section titles, Bold. */
  --text-body: 400 16px/24px var(--font-sans); /* Default running text, in `ink`. */
  --text-small: 400 14px/20px var(--font-sans); /* Captions and helper text, in `ink-muted`. */
  --text-tagline: 300 14px/20px var(--font-sans); /* Wide-tracked uppercase in Light, echoing the logo's tagline. Short labels only; in `brand-green` only on the dark theme's grounds, otherwise `ink-muted`. */
}
.display {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.heading-1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: 0;
}
.heading-2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: 0.24em;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("fonts/AsapCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}