/*
 * Design tokens from the Routific Website Figma file (variables on node 7166:92349).
 * Code components render inside Shadow DOM, so tokens are declared on :host as well as :root
 * (:root covers the local preview and Webflow's own page; :host covers the shadow tree).
 */
:host,
:host {
  /* Brand */
  --rt-indigo-100: #374cd2;
  --rt-indigo-200: #667afa;
  --rt-yellow-200: #ffad0a;
  --rt-yellow-border: #b97b01;
  --rt-turquoise: #45c4d7;
  --rt-primary-500: #326bfc;
  --rt-primary-600: #1750e3;
  --rt-hero-blue: #1f36a7;
  --rt-hero-lilac: #eceefb;

  /* Text */
  --rt-text-primary: #282828;
  --rt-text-secondary: #676d7e;
  --rt-text-tertiary: #9da1af;

  /* Route colours */
  --rt-route-violet: #7547bf;
  --rt-route-pink: #ff85a9;
  --rt-route-sky: #269ed1;
  --rt-route-lilac: #a770db;

  /* Type — Proxima Nova is expected to be loaded by the Webflow site (Adobe Fonts);
     Plus Jakarta Sans and Figtree are loaded from Google Fonts by useDocumentFonts(). */
  --rt-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --rt-font-heading: "Figtree", system-ui, sans-serif;
  --rt-font-body: "proxima-nova", "Proxima Nova", "Figtree", system-ui, sans-serif;
  --rt-font-ui: "SF Pro Text", -apple-system, "Inter", system-ui, sans-serif;

  /* Radii */
  --rt-radius-md: 8px;
  --rt-radius-lg: 16px;

  /* Vector map (Hero/showcase/MapBase.tsx): Mapbox-light look of the current Routific UI */
  --map-land: #edeff3;
  --map-street: #fcfdfe;
  --map-park: #d3e9d1;
  --map-water: #b3caf3;
  --map-industrial: #f2e4c6;
  --map-highway: #aab3c7;
  --map-highway-edge: #fcfdfe;
}

/* Shared styles for the vector map (Hero/showcase/MapBase.tsx). Colours are in tokens.css. */
.rt-map-labels text {
  font-family: var(--rt-font-heading);
  font-weight: 700;
  fill: #8a90a2;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.6px;
}

/* ---------------------------------------------------------------------------
 * The Routific driver app (2026 redesign), shared by the hero and Track progress phones.
 * Drawn by src/components/Hero/showcase/DriverUi.tsx in Figma px (Figtree, the app's colours).
 * Selectors carry `svg` so they beat each phone's own `… text` defaults.
 * ------------------------------------------------------------------------- */
svg .rt-da text {
  font-family: var(--rt-font-heading);
  font-weight: 400;
  fill: #282828;
}

svg .rt-da .rt-da-body { font-size: 16px; }
svg .rt-da .rt-da-strong { font-weight: 500; }
svg .rt-da .rt-da-semi { font-weight: 600; }
svg .rt-da .rt-da-muted { fill: #676d7e; }
svg .rt-da .rt-da-cap { font-size: 14px; fill: #676d7e; }
svg .rt-da .rt-da-label { font-size: 14px; font-weight: 600; fill: #676d7e; }
svg .rt-da .rt-da-small { font-size: 12px; fill: #676d7e; }
svg .rt-da .rt-da-ok { fill: #32a67f; }
svg .rt-da .rt-da-title { font-size: 18px; font-weight: 600; text-anchor: middle; }
svg .rt-da .rt-da-h { font-size: 20px; font-weight: 600; }

svg .rt-da .rt-da-seg { font-size: 16px; fill: #8babfc; }
svg .rt-da .rt-da-seg-on { font-weight: 600; fill: #1750e3; }

svg .rt-da .rt-da-btn { font-size: 18px; font-weight: 500; fill: #fff; }
svg .rt-da .rt-da-btn-outline { fill: #326bfc; }
svg .rt-da .rt-da-btn-off { fill: #ccd0db; }
svg .rt-da .rt-da-link { font-size: 16px; font-weight: 500; fill: #326bfc; }

svg .rt-da .rt-da-badge { font-size: 14px; text-anchor: middle; dominant-baseline: central; }
svg .rt-da .rt-da-badge-lg { font-size: 16px; }
svg .rt-da .rt-da-badge-next { fill: #fff; }
svg .rt-da .rt-da-badge-done { fill: #676d7e; }

/* camera */
svg .rt-da .rt-da-count { font-size: 18px; fill: #fff; }

/* the current-location dot's pulse */
.rt-da-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rt-da-pulse 2.2s ease-out infinite;
}
@keyframes rt-da-pulse {
  0% { opacity: 0.45; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-da-pulse { animation: none; }
}