:root {
  color-scheme: light;
  --ink: #1d1b20;
  --muted: #49454f;
  --line: #ded8e1;
  --primary: #6750a4;
  --surface: #ffffff;
  --wash: #f8f6fb;
  --on-primary: #ffffff;

  /* The logo's colors (favicon.svg): its frame, the night sky, the water and
     the foam. */
  --logo-frame: #7688c8;
  --logo-night: #152331;
  --logo-water: #0761cb;
  --logo-deep: #0a2167;
  --logo-foam: #e5e6fa;

  /* Solid tiles for icons and chips, from the palette, the logo and the app:
     Material's primary and tertiary containers, the logo's frame and water,
     and the amber of the app's stars and map marker badges. --on-tile is the
     ink on every tile but water, which takes --on-water. */
  --lilac: #eaddff;
  --rose: #ffd8e4;
  --periwinkle: var(--logo-frame);
  --water: var(--logo-water);
  --amber: #ffc107;
  --on-tile: #1d1b20;
  --on-water: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--primary);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}