:root {
  /* ---- Base ink + paper ---------------------------------------------- */
  --ink: #111111;          /* every outline, every border, most text */
  --ink-soft: #3a3a3a;
  --ink-mute: #6b6b6b;
  --paper: #ffffff;        /* boarding passes, photo mats */
  --paper-warm: #fdfaf4;

  /* ---- Neutrals (UI chrome: close buttons, dividers) ----------------- */
  --gray-100: #f2f2f2;
  --gray-200: #e4e4e4;
  --gray-300: #cfcfcf;
  --gray-400: #a8a8a8;
  --gray-700: #4a4a4a;
  --gray-900: #1b1b1b;

  /* ---- Destination palette hues (raw values) ------------------------- */
  --shanghai-sky: #dce9fb;
  --shanghai-blossom: #fbcbe8;
  --suzhou-tea: #e5f8c8;
  --suzhou-apricot: #fbd6bd;
  --guangzhou-mango: #fba35d;
  --guangzhou-cobalt: #1e3aff;
  --guilin-jade: #4a8b5c;
  --guilin-clay: #8a4a12;
  --wuxi-plum: #d8c6f5;
  --wuxi-grape: #5b2ea6;
  --sanya-coral: #ffd6cc;
  --sanya-tomato: #e2432c;

  /* ---- Semantic (defaults; overridden per destination palette) ------- */
  --surface-page: var(--shanghai-sky);
  --surface-card: var(--paper);
  --surface-accent: var(--shanghai-blossom);
  --text-body: var(--ink);
  --text-heading: var(--ink);
  --text-mute: var(--ink-mute);
  --text-on-accent: var(--ink);
  --border-strong: var(--ink);
  --border-soft: var(--gray-300);

  /* ---- Semantic status (used sparingly: form validation only) -------- */
  --status-good: #2f7d43;
  --status-warn: #c9741a;
  --status-bad: #c62b18;
}