/* Design tokens. The 3D engine rewrites the colour variables every frame from the sky over the city;
   the values here are what the page shows before it starts, or when WebGL is unavailable. */
:root {
  /* page (sections below the hero): 墨夜金, see js/themes.js */
  --page: #0c0f17;
  --page-2: #11151f;
  --page-ink: #f2ede4;
  --page-soft: #9ba3b4;
  --page-line: rgba(242, 237, 228, .1);
  --page-card: rgba(255, 255, 255, .04);
  --page-accent: #d8b57a;
  --page-on-accent: #14110b;
  /* hero overlay (type over the 3D scene) */
  --ink: #f7f3ec;
  --soft: #e4dfd6;
  --accent: #e9c88f;
  --on-accent: #14110b;
  --halo: rgba(4, 8, 20, .42);
  --sky-top: #0a1430;

  --serif: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --caps: Cinzel, "Noto Sans SC", sans-serif;
  --out: cubic-bezier(.22, 1, .36, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: min(1180px, 100% - 2 * var(--gutter));
  --r: 14px;
  --shadow: 0 1px 1px rgba(10, 16, 32, .04), 0 12px 32px -18px rgba(10, 16, 32, .28);
}

html[lang="en"] {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}