/* Theme values the design package leaves to the app. Linked from index.html so
   they land before the first paint, exactly as surstromming's demo does — the
   token-generation tool doesn't exist yet, so dark values are written out. */

:root {
  /* Geist carries no Georgian, and most stop names in Batumi are Georgian.
     Per-glyph fallback keeps Geist for Latin and hands ქართული to Noto rather
     than to whatever the OS happens to have. Loading is in main.ts. */
  --font-sans: 'Geist Variable', 'Noto Sans Georgian Variable', ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* A route's identity is one hue from the API; lightness and chroma are the
     theme's, so 28 route colours stay legible without the server knowing
     whether it's dark out. */
  --route-l: 0.55;
  --route-c: 0.17;
  --route-label: oklch(1 0 0);
  --route-casing: oklch(1 0 0);

  --stop-ring: oklch(0.42 0 0);
  --stop-fill: oklch(1 0 0);
  /* The chosen stop, inverted against the ordinary ones. */
  --stop-selected-ring: oklch(1 0 0);
  --stop-selected-fill: oklch(0.145 0 0);
  --stop-selected-shadow: oklch(0 0 0 / 35%);

  --user-ring: oklch(1 0 0);
  --user-fill: oklch(0.55 0.22 258);

  /* The accuracy halo: the dot's own blue, weak enough to read the map through.
     Not a design token — it is the map's furniture, exactly as --stop-ring and
     --route-casing are. */
  --user-accuracy-fill: oklch(0.55 0.22 258 / 14%);
  --user-accuracy-ring: oklch(0.55 0.22 258 / 35%);
  /* The facing beam: stronger than the halo, since it is read at a glance
     rather than through, and faded to nothing by its own gradient. */
  --user-beam: oklch(0.55 0.22 258 / 55%);

}

[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  /* Dark steps are chosen against the dark surface, not flipped from light —
     same hues, re-validated for the lightness band, contrast and CVD. */
  --chart-1: oklch(0.64 0.18 258);
  --chart-2: oklch(0.655 0.14 162);
  --chart-3: oklch(0.6 0.19 30);
  --chart-4: oklch(0.63 0.2 305);
  --chart-5: oklch(0.655 0.13 85);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  /* Route pills lighten and their label darkens, so the same 28 hues keep
     their contrast against a dark map instead of glowing. */
  --route-l: 0.72;
  --route-c: 0.16;
  --route-label: oklch(0.16 0 0);
  --route-casing: oklch(0.12 0 0);

  --stop-ring: oklch(0.88 0 0);
  --stop-fill: oklch(0.25 0 0);
  --stop-selected-ring: oklch(0.16 0 0);
  --stop-selected-fill: oklch(0.985 0 0);
  --stop-selected-shadow: oklch(0 0 0 / 60%);

  --user-ring: oklch(0.16 0 0);
  --user-fill: oklch(0.72 0.17 258);

  --user-accuracy-fill: oklch(0.72 0.17 258 / 16%);
  --user-accuracy-ring: oklch(0.72 0.17 258 / 40%);
  --user-beam: oklch(0.72 0.17 258 / 55%);

}

/* Text that must reach a screen reader but not the layout. Used where a colour
   or an animation is carrying meaning that a word has to carry too. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}