/* ==========================================================================
   Voyage East — Design Tokens
   Curated cultural journeys in Shanghai and Jiangnan.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Noto+Serif+SC:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ==========================================================
     Color · Base palette — “Celadon & Ink” 青瓷·墨
     Ink-teal anchors · celadon is the signature · cinnabar seals.
     A warm-paper ground keeps large dark areas off the page so
     the system reads like ink-wash, not a heavy navy block.
     ========================================================== */

  /* Anchor — ink-teal (replaces the old heavy indigo) */
  --ve-teal:          #284845;  /* primary  · deep ink-teal */
  --ve-teal-deep:     #1C3633;  /* hover / pressed */
  --ve-teal-soft:     #3B5B56;  /* lifted ink */

  /* Signature — celadon green 青瓷 (the ownable colour) */
  --ve-celadon:       #84A595;  /* signature glaze green */
  --ve-celadon-deep:  #5F8275;  /* text-safe celadon, hover */
  --ve-celadon-wash:  #E4EAE3;  /* pale atmospheric wash · ink-wash washes */

  /* Ground — warm paper 纸 */
  --ve-paper:         #F4EFE6;  /* main warm background */
  --ve-paper-warm:    #ECE4D6;  /* tonal card */
  --ve-paper-deep:    #E0D8C7;  /* divider on paper */

  /* Accent — cinnabar 朱砂 (the seal-red, used like a name chop) */
  --ve-cinnabar:      #B0402E;  /* accent · CTA, seal marks */
  --ve-cinnabar-deep: #8E3122;

  /* Neutral & text */
  --ve-flax:          #B6A88D;  /* flax stone · rare neutral */
  --ve-ink:           #232320;  /* primary text · ink near-black */
  --ve-ink-2:         #555049;  /* secondary text */
  --ve-ink-3:         #847E70;  /* tertiary · captions */
  --ve-line:          #D2C9B6;  /* hairline rule (warm) */
  --ve-white:         #FFFFFF;

  /* ---------- Backward-compatible aliases ----------
     Older files reference --ve-indigo / --ve-terracotta / --ve-ivory.
     Re-pointing them migrates those files to the new palette for free. */
  --ve-indigo:        var(--ve-teal);
  --ve-indigo-deep:   var(--ve-teal-deep);
  --ve-indigo-soft:   var(--ve-teal-soft);
  --ve-ivory:         var(--ve-paper);
  --ve-ivory-warm:    var(--ve-paper-warm);
  --ve-ivory-deep:    var(--ve-paper-deep);
  --ve-terracotta:    var(--ve-cinnabar);
  --ve-terracotta-deep: var(--ve-cinnabar-deep);
  --ve-gold:          var(--ve-flax);
  --ve-charcoal:      var(--ve-ink);
  --ve-charcoal-2:    var(--ve-ink-2);
  --ve-charcoal-3:    var(--ve-ink-3);

  /* ---------- Color · Semantic ---------- */
  --bg:                 var(--ve-paper);
  --bg-elevated:        #FAF6EE;
  --bg-inverse:         var(--ve-teal);
  --surface:            var(--ve-paper-warm);
  --surface-celadon:    var(--ve-celadon-wash);
  --fg1:                var(--ve-ink);
  --fg2:                var(--ve-ink-2);
  --fg3:                var(--ve-ink-3);
  --fg-on-dark:         var(--ve-paper);
  --accent:             var(--ve-cinnabar);
  --accent-deep:        var(--ve-cinnabar-deep);
  --signature:          var(--ve-celadon);
  --signature-deep:     var(--ve-celadon-deep);
  --rule:               var(--ve-line);

  /* ---------- Type · Families ---------- */
  --font-serif:      "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:       "DM Sans", "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-serif-cn:   "Noto Serif SC", "Songti SC", "STSong", var(--font-serif);
  --font-sans-cn:    "DM Sans", "PingFang SC", "Microsoft YaHei", var(--font-sans);

  /* ---------- Type · Scale (editorial, slightly understated) ---------- */
  --fs-display:   clamp(72px, 7.2vw, 96px);   /* @kind font */ /* hero headlines */
  --fs-h1:        clamp(44px, 5vw, 56px);     /* @kind font */ /* section titles */
  --fs-h2:        clamp(28px, 3vw, 34px);     /* @kind font */ /* card titles */
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-caption:   12px;   /* often paired with tracking */
  --fs-eyebrow:   11px;   /* tiny label, uppercase, tracked */

  /* ---------- Type · Style ---------- */
  --lh-tight:     1.05;   /* @kind font */
  --lh-display:   1.08;   /* @kind font */
  --lh-heading:   1.18;   /* @kind font */
  --lh-body:      1.6;    /* @kind font */
  --lh-loose:     1.75;   /* @kind font */

  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-eyebrow:  0.14em;   /* subtle editorial tracking (refined from 0.18em) */

  /* ---------- Spacing · 4pt grid ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii (restrained — feels printed, not plastic) ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ---------- Shadow (soft, paper-on-paper) ---------- */
  --shadow-1: 0 1px 2px rgba(35, 35, 32, 0.06);
  --shadow-2: 0 6px 18px rgba(35, 35, 32, 0.08), 0 1px 2px rgba(35, 35, 32, 0.06);
  --shadow-3: 0 18px 40px rgba(40, 72, 69, 0.14), 0 2px 6px rgba(35, 35, 32, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19); /* @kind other */
  --dur-fast:   160ms;   /* @kind other */
  --dur-base:   280ms;   /* @kind other */
  --dur-slow:   520ms;   /* @kind other */
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Typography classes (semantic)
   ========================================================================== */

.ve-display, .ve-h1, .ve-h2, .ve-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg1);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.ve-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 300;
}
.ve-h1 { font-size: var(--fs-h1);  line-height: var(--lh-heading); }
.ve-h2 { font-size: var(--fs-h2);  line-height: var(--lh-heading); }
.ve-h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}

.ve-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg1);
}

.ve-body    { font-size: var(--fs-body);    line-height: var(--lh-body); color: var(--fg1); }
.ve-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg1); }
.ve-small   { font-size: var(--fs-small);   line-height: 1.5; color: var(--fg2); }

.ve-caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg3);
  font-family: var(--font-sans);
}

.ve-eyebrow {
  font-size: var(--fs-eyebrow);
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg2);
}

.ve-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.35;
  color: var(--fg1);
  text-wrap: pretty;
}

/* ==========================================================================
   Hairline rule
   ========================================================================== */

.ve-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}