/* One palette per destination. Apply with data-palette on any wrapper:
   <div data-palette="guangzhou"> … </div>
   Shanghai / Suzhou / Guangzhou / Guilin are read directly from the source
   screenshots. Wuxi + Sanya are extrapolated using the same rules
   (page hue + a high-contrast chip hue) — see readme.md. */

[data-palette="shanghai"] {
  --surface-page: var(--shanghai-sky);
  --surface-accent: var(--shanghai-blossom);
  --text-on-accent: var(--ink);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}
[data-palette="suzhou"] {
  --surface-page: var(--suzhou-tea);
  --surface-accent: var(--suzhou-apricot);
  --text-on-accent: var(--ink);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}
[data-palette="guangzhou"] {
  --surface-page: var(--guangzhou-mango);
  --surface-accent: var(--guangzhou-cobalt);
  --text-on-accent: var(--paper);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}
[data-palette="guilin"] {
  --surface-page: var(--guilin-jade);
  --surface-accent: var(--guilin-clay);
  --text-on-accent: var(--paper);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}
[data-palette="wuxi"] {
  --surface-page: var(--wuxi-plum);
  --surface-accent: var(--wuxi-grape);
  --text-on-accent: var(--paper);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}
[data-palette="sanya"] {
  --surface-page: var(--sanya-coral);
  --surface-accent: var(--sanya-tomato);
  --text-on-accent: var(--paper);
  --text-heading: var(--ink);
  --text-body: var(--ink);
}