/* Color tokens shared by all pages (index + photo detail).
   Values collected from the palette gallery.css / coverflow.css /
   common.js actually use. Consumed so far only by the icon-link color
   (--color-text on .button / .toolbar ul a / .page-fs); reference these
   custom properties when refactoring further rules, don't redefine the
   raw values elsewhere. */

:root {
  /* page (both modes are dark) */
  --color-bg: #000;
  --color-text: #fff;
  --color-text-dim: #bbb;

  /* brand accent — the orange of the current-photo map marker
     (inherited from the legacy design's nav orbs) */
  --color-accent: #f7941d;
  --color-accent-dark: #e06a00;

  /* keyboard focus outline (:focus-visible) */
  --color-focus: #ffbf00;

  /* light map-UI surfaces (tabs, buttons, sidebar, popups) */
  --color-surface: #fff;
  --color-surface-text: #333;
  --color-surface-muted: #666;
  --color-surface-faint: #999;
  --color-surface-border: #777;
  --color-surface-border-soft: #888;
  --color-link-on-surface: #06c;

  /* dark translucent overlays (in-map notice, pills over photos) */
  --color-overlay: rgba(20, 20, 22, 0.93);
  --color-pill-bg: rgba(0, 0, 0, 0.25);
  --color-pill-bg-strong: rgba(0, 0, 0, 0.55);
  --color-pill-border: rgba(255, 255, 255, 0.7);

  /* browser theme-color metas (index / detail) */
  --color-theme-index: #4a1004;
  --color-theme-detail: #000;
}