/* Lans Transport design tokens.
   Source: Lans Transport ID Visual design system (tokens.css), light palette only,
   because the website uses the light theme. Fonts load from Google Fonts in index.html.
   Do not edit values here: change them in the design system and copy again. */
:root, [data-theme="light"] {
  --green-900: #0b2b21; /* Deepest green. Dark-theme page background and heaviest text. */
  --green-800: #0f3d2e; /* Lans Green, the primary brand color. Logo, truck body, headers, primary app buttons. White text on it is 12.2:1. */
  --green-700: #1a5540; /* Hover and pressed state for green-800 fills. */
  --green-500: #3d7a5e; /* Secondary green for icons, the TRANSPORT line in the logo and chart series. 5.1:1 on white, so it can carry text. */
  --green-300: #9cc3ae; /* Decorative borders, dividers and illustrations on light grounds. Muted text on green-800 and green-900. */
  --green-100: #dcebe2; /* Light panels, the Available status pill, table header rows. */
  --green-50: #f1f7f3; /* Subtle page tint behind white cards. */
  --white: #ffffff; /* Paper. Page background in the light theme and the logo on dark grounds. */
  --copper: #c06a3e; /* Brand accent at full strength: the lane line in the logo, truck stripe, print, illustrations. Not for small text or button fills (3.9:1 with white). */
  --copper-deep: #a85a32; /* Copper as a button fill, with white text at 5.0:1. Website calls to action. */
  --copper-dark: #8a4524; /* Copper as text or icons on white (7.1:1) and on copper-tint (5.8:1). */
  --copper-tint: #f5e6dc; /* Light copper ground for the Maintenance status pill. */
  --brick: #a6312a; /* Errors and out-of-service only. 6.8:1 on white. Never in the logo, on trucks or in print. */
  --brick-tint: #f6e3e1; /* Light ground for error alerts and the Out of service pill. */
  --slate: #66736d; /* Neutral status dot (On route) and disabled icons. */
  --slate-dark: #3f4b46; /* Text on slate-tint (7.5:1). */
  --slate-tint: #e6eae8; /* Light ground for the On route status pill. */
  --surface: #ffffff; /* Page background. Body text is ink on surface. */
  --surface-sunken: #f1f7f3; /* Recessed areas: app sidebars, table bands, the ground behind cards. */
  --surface-raised: #ffffff; /* Cards, inputs, menus. Sits on surface-sunken. */
  --ink: #0b2b21; /* Body text and headings on surface, surface-sunken and surface-raised (14:1 light, 12:1+ dark). */
  --ink-muted: #3f5a4f; /* Secondary text, captions, table headers on surface and surface-sunken (6.9:1+ light, 6.5:1+ dark). */
  --ink-brand: #0f3d2e; /* Display headings and the logo ink. Lans Green in light, white in dark. */
  --ink-sub: #3d7a5e; /* Logo subline (TRANSPORT) and small labels. */
  --border: #dcebe2; /* Hairlines between rows and around cards. Decorative only, never the only edge of a control. */
  --border-control: #6e9483; /* Input and secondary-button borders. 3.4:1 on white, 3.8:1 on green-900. */
  --action: #0f3d2e; /* Primary app button fill, selected tabs, links in the app. */
  --action-hover: #1a5540; /* Hover state of action. */
  --on-action: #ffffff; /* Text and icons on action (12.2:1 light, 7.8:1 dark). */
  --cta: #a85a32; /* Website call-to-action fill (Get a quote). At most one per view. */
  --cta-hover: #8a4524; /* Hover state of cta. */
  --on-cta: #ffffff; /* Text on cta (5.0:1 light, 5.6:1 dark). */
  --lane: #c06a3e; /* The dashed lane line in the logo and lane-line dividers. */
  --focus: #c06a3e; /* Focus ring, 2px solid with 2px offset. 3.9:1 on white, 7:1 on green-900. */
  --danger: #a6312a; /* Error text and icons (6.8:1 light, 5.9:1 dark). */
  --danger-bg: #f6e3e1; /* Error alert and Out of service pill ground. */
  --status-available-bg: #dcebe2; /* Available pill ground. */
  --status-available-fg: #0f3d2e; /* Available pill text (9.9:1 light). */
  --status-available-dot: #3d7a5e; /* Available dot. */
  --status-route-bg: #e6eae8; /* On route pill ground. */
  --status-route-fg: #3f4b46; /* On route pill text (7.5:1 light). */
  --status-route-dot: #66736d; /* On route dot. */
  --status-maint-bg: #f5e6dc; /* Maintenance pill ground. */
  --status-maint-fg: #8a4524; /* Maintenance pill text (5.8:1 light). */
  --status-maint-dot: #c06a3e; /* Maintenance dot. */
  --status-out-bg: #f6e3e1; /* Out of service pill ground. */
  --status-out-fg: #a6312a; /* Out of service pill text (5.5:1 light). */
  --status-out-dot: #a6312a; /* Out of service dot. */
  --shadow-raised: 0 1px 2px rgba(11,43,33,0.08), 0 2px 8px rgba(11,43,33,0.06); /* Menus and dialogs only. Cards use a border instead. */
}
:root {
  --space-1: 4px; /* Gap between an icon and its label; pill padding. */
  --space-2: 8px; /* Gap between related controls. */
  --space-3: 12px; /* Button and input horizontal padding; table cell padding. */
  --space-4: 16px; /* Card padding; minimum page gutter on phones. */
  --space-6: 24px; /* Space between groups inside a section. */
  --space-8: 32px; /* Space between sections in the app. */
  --space-12: 48px; /* Space between sections on the website and in documents. */
  --radius-sm: 2px; /* Status pills, tags, checkboxes. */
  --radius-md: 4px; /* The default: buttons, inputs, cards, alerts, app icon. */
  --radius-lg: 8px; /* Large panels and dialogs only. */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-sans: Barlow, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-display-xl: 800 56px/56px var(--font-display); /* Website hero headline. One per page. */
  --text-display-lg: 800 40px/44px var(--font-display); /* Section headlines, deck titles. */
  --text-heading: 700 28px/32px var(--font-display); /* Page titles in the app, document headings. */
  --text-subheading: 600 20px/24px var(--font-display); /* Card titles, table group titles. */
  --text-label: 600 13px/16px var(--font-display); /* Eyebrows and small labels, set in uppercase. ink-sub or copper-dark. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Website intro paragraphs. */
  --text-body: 400 15px/24px var(--font-sans); /* Default text on the website, documents and the app. */
  --text-body-strong: 500 15px/24px var(--font-sans); /* Emphasis inside body text, button labels. */
  --text-small: 400 13px/20px var(--font-sans); /* Captions, table cells, helper text. */
  --text-mono: 400 13px/20px var(--font-mono); /* Truck, load and invoice IDs in the app and on documents. Never for prose. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: 0;
}
.heading {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.subheading {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}