/* Christmas Markets 2026 Companion — design tokens.
   "Punsch at dusk." The subject is a Central European market after four
   in the afternoon in December: a blue-black sky, spruce-green stall wood,
   hot punch in enamel mugs, string lights. Dark mode is the hero (the app
   is used at night); light mode is the frost of the next morning.

   Variable names are the Vietnam Companion's, so the app swaps this file
   per trip. The roles: --cobalt is the signature (plaque, stall wood);
   --lantern is the accent (punch, leave-by, the Recommended tag). */

:root {
  /* surfaces and ink — frost ivory, cool not cream */
  --paper: #eff1ec;
  --paper-2: #e5e9e1;
  --paper-3: #d9ded5;
  --ink: #10201b;
  --ink-2: #3e4f48;
  --ink-3: #74837c;
  --line: #d1d7cf;

  /* the plaque (spruce enamel, ivory type) and the punch */
  --cobalt: #1e4d3a;
  --cobalt-deep: #153828;
  --cobalt-ink: #f6f1e4;
  --lantern: #e58a2e;
  --lantern-ink: #4a2a05;
  --lacquer: #9e2b3a;
  --jade: #3b7d5e;
  --jade-soft: #dcebe2;
  --lacquer-soft: #f3dadd;
  --lantern-soft: #fae4c8;

  /* one colour per city: Bohemian garnet, Schönbrunn ochre, Danube blue */
  --city-prague: #8c2f3c;
  --city-vienna: #c9972b;
  --city-budapest: #2f6b8f;
  --city-transit: #74837c;

  /* one colour per place kind, used by the map and place chips */
  --kind-hotel: #1e4d3a;
  --kind-restaurant: #9e2b3a;
  --kind-street-food: #9e2b3a;
  --kind-cafe: #8b5e34;
  --kind-sight: #3f5fa6;
  --kind-market: #e58a2e;
  --kind-station: #10201b;
  --kind-airport: #10201b;
  --kind-walk-point: #3b7d5e;
  --kind-other: #74837c;

  /* the photo wash: every card photo gets the same December evening */
  --wash-top: rgba(63, 95, 166, 0.18);
  --wash-bottom: rgba(21, 56, 40, 0.78);

  /* type: one variable family, two voices. Display here is broad and heavy
     (painted stall signage), where Vietnam's was tall and condensed. */
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-wdth: 100;
  --display-wght: 800;
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 28px;
  --t-2xl: 38px;
  --t-3xl: 54px;
  --lh-tight: 1.02;
  --lh-text: 1.45;

  /* space, radius, elevation */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r1: 4px;
  --r2: 10px;
  --r3: 18px;
  --shadow: 0 1px 2px rgba(16, 32, 27, 0.08), 0 10px 24px -12px rgba(16, 32, 27, 0.28);
  --tap: 44px;
  --tabbar: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* the four-o'clock sky */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0e1a22;
    --paper-2: #142430;
    --paper-3: #1c3040;
    --ink: #eef0ea;
    --ink-2: #b8c0ba;
    --ink-3: #7f8b86;
    --line: #24384a;
    --cobalt: #2a6a50;
    --cobalt-deep: #1e4d3a;
    --cobalt-ink: #f6f1e4;
    --lantern: #ea9640;
    --lantern-ink: #ffd9a8;
    --lacquer: #c8475a;
    --jade: #5aa384;
    --jade-soft: #163a2c;
    --lacquer-soft: #45202a;
    --lantern-soft: #4a3010;
    --city-vienna: #d9a93a;
    --city-budapest: #4a8db5;
    --kind-hotel: #3b8a68;
    --kind-sight: #6f8ad6;
    --kind-station: #eef0ea;
    --kind-airport: #eef0ea;
    --wash-top: rgba(14, 26, 34, 0.1);
    --wash-bottom: rgba(14, 26, 34, 0.85);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme='dark'] {
  --paper: #0e1a22;
  --paper-2: #142430;
  --paper-3: #1c3040;
  --ink: #eef0ea;
  --ink-2: #b8c0ba;
  --ink-3: #7f8b86;
  --line: #24384a;
  --cobalt: #2a6a50;
  --cobalt-deep: #1e4d3a;
  --cobalt-ink: #f6f1e4;
  --lantern: #ea9640;
  --lantern-ink: #ffd9a8;
  --lacquer: #c8475a;
  --jade: #5aa384;
  --jade-soft: #163a2c;
  --lacquer-soft: #45202a;
  --lantern-soft: #4a3010;
  --city-vienna: #d9a93a;
  --city-budapest: #4a8db5;
  --kind-hotel: #3b8a68;
  --kind-sight: #6f8ad6;
  --kind-station: #eef0ea;
  --kind-airport: #eef0ea;
  --wash-top: rgba(14, 26, 34, 0.1);
  --wash-bottom: rgba(14, 26, 34, 0.85);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
}