/* ==========================================================================
   PAZHU VINEYARD — DESIGN SYSTEM / TOKENS
   The single source of truth. Nothing in the site may introduce a colour,
   size, duration or easing that is not defined here.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COLOUR
     Low saturation only. Colour is used for emphasis, never decoration.
     Palette drawn from Tibetan snow, plateau rock, vine, oak, soil, dawn. */

  /* Ink — near black, the museum wall at night */
  --c-ink:            #0b0b0c;
  --c-ink-raised:     #141416;
  --c-ink-line:       rgba(242, 239, 234, 0.14);
  --c-ink-line-soft:  rgba(242, 239, 234, 0.08);

  /* Cellar — the warm near-black the bottles were photographed against.
     Sampled from the backdrops of all seven product shots, which run from
     #050100 to #2d190f. Sitting the collection on this colour lets each
     bottle emerge from the page instead of being pasted onto it. */
  --c-cellar:         #110a06;
  --c-cellar-raised:  #1b110a;
  --c-cellar-line:    rgba(238, 228, 216, 0.15);
  --c-cellar-line-soft: rgba(238, 228, 216, 0.08);

  /* Paper — warm white, the gallery wall by day */
  --c-paper:          #f2efea;
  --c-paper-raised:   #e9e5de;
  --c-paper-line:     rgba(11, 11, 12, 0.14);
  --c-paper-line-soft:rgba(11, 11, 12, 0.07);

  /* Stone — the full neutral ramp */
  --c-stone-100:      #d8d3cb;
  --c-stone-300:      #a9a39a;
  --c-stone-500:      #8b857c;
  --c-stone-700:      #55504a;
  --c-stone-900:      #2a2724;

  /* ---------------------------------------------------------------- ACCENT
     Not invented. Every accent below is lifted from the 冰纯 packaging and
     the building it was modelled on, then dropped in saturation until it
     belongs on a gallery wall.

       松石绿 turquoise    sampled #0090a0   the first sacred gemstone
       蜜蜡黄 beeswax      sampled #e09000   the second
       金     gold                           the third
       赭色边玛墙 benma                       the ochre band of Yumbulakhang
       石黄色墙面 stone yellow                its sunlit face

     Rationed. Never fill large areas. */

  /* Each accent has a deep cut for paper and a lifted cut for ink, so that
     contrast survives both surfaces without changing hue. */
  --c-turquoise:       #2c6b70;
  --c-turquoise-lift:  #7fb2b4;
  --c-beeswax:         #ab7c28;
  --c-beeswax-lift:    #d7a94f;
  --c-gold:            #9d8451;
  --c-gold-lift:       #c2a878;
  --c-benma:           #7c3a2a;
  --c-benma-lift:      #b0685a;
  --c-stone-yellow:    #cbb489;

  /* Brand crimson — sampled from the logo medallion (cinnabar). */
  --c-cinnabar:        #b43c42;
  --c-cinnabar-lift:   #c9585e;

  /* Semantic accents — components reference these, never the raw cuts. */
  --accent:      var(--c-gold-lift);      /* the default emphasis */
  --accent-cool: var(--c-turquoise-lift); /* ice, water, winter */
  --accent-warm: var(--c-beeswax-lift);   /* sun, honey, harvest */
  --accent-clay: var(--c-benma-lift);     /* earth, wall, hearth */
  --accent-red:  var(--c-cinnabar-lift);

  /* Semantic — resolved per theme below */
  --bg:               var(--c-ink);
  --bg-raised:        var(--c-ink-raised);
  --fg:               var(--c-paper);
  --fg-muted:         var(--c-stone-300);
  --fg-faint:         var(--c-stone-500);
  --line:             var(--c-ink-line);
  --line-soft:        var(--c-ink-line-soft);

  /* ------------------------------------------------------------ TYPOGRAPHY
     Editorial. Large headlines, comfortable body, unmistakable hierarchy. */
  --font-display:    "Instrument Serif", "Times New Roman", serif;
  --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-cn:         "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-cn-display: "Noto Serif SC", "Songti SC", "SimSun", serif;

  --t-display: clamp(3.25rem, 10vw, 9rem);
  --t-h1:      clamp(2.5rem, 6.5vw, 5.5rem);
  --t-h2:      clamp(1.9rem, 4vw, 3.25rem);
  --t-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --t-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-caption: 0.8125rem;
  --t-label:   0.6875rem;

  --lh-display: 0.95;
  --lh-tight:   1.08;
  --lh-snug:    1.3;
  --lh-body:    1.7;

  --tr-display: -0.02em;   /* tracking */
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-label:   0.22em;

  /* ---------------------------------------------------------------- SPACE
     A single geometric scale. No arbitrary margins anywhere. */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Section rhythm — generous, fluid, unhurried */
  --section-y:      clamp(5rem, 12vw, 11rem);
  --section-y-tall: clamp(7rem, 18vw, 16rem);

  /* ----------------------------------------------------------- GRID / SIZE */
  --gutter:    clamp(1.5rem, 5vw, 5rem);
  --container: min(84rem, 100% - (2 * var(--gutter)));
  --container-narrow: min(56rem, 100% - (2 * var(--gutter)));
  --measure:   38rem;    /* optimal reading width */
  --measure-narrow: 30rem;

  /* --------------------------------------------------------------- RADIUS
     A museum has no rounded corners. */
  --radius:    0px;
  --radius-sm: 1px;

  /* --------------------------------------------------------------- SHADOW
     Depth comes from hairlines and space, not shadow. One shadow exists,
     reserved for elements that genuinely float above the page. */
  --shadow-float: 0 2.5rem 6rem rgba(0, 0, 0, 0.55);

  /* --------------------------------------------------------------- MOTION
     One easing. Three durations. Applied everywhere without exception. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --d-fast:    240ms;
  --d-base:    520ms;
  --d-slow:    1100ms;
  --d-reveal:  1400ms;

  /* ----------------------------------------------------------------- MISC */
  --header-h:  clamp(4.5rem, 7vw, 6rem);
  --border:    1px solid var(--line);
  --border-soft: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------- THEMES
   Two surfaces only: ink (night gallery) and paper (day gallery).
   Sections declare their surface; every child resolves automatically. */

[data-surface="ink"] {
  --bg:        var(--c-ink);
  --bg-raised: var(--c-ink-raised);
  --fg:        var(--c-paper);
  --fg-muted:  var(--c-stone-300);
  --fg-faint:  var(--c-stone-500);
  --line:      var(--c-ink-line);
  --line-soft: var(--c-ink-line-soft);
  --accent:      var(--c-gold-lift);
  --accent-cool: var(--c-turquoise-lift);
  --accent-warm: var(--c-beeswax-lift);
  --accent-clay: var(--c-benma-lift);
  --accent-red:  var(--c-cinnabar-lift);
  background: var(--bg);
  color: var(--fg);
}

[data-surface="cellar"] {
  --bg:        var(--c-cellar);
  --bg-raised: var(--c-cellar-raised);
  --fg:        var(--c-paper);
  --fg-muted:  var(--c-stone-300);
  --fg-faint:  var(--c-stone-500);
  --line:      var(--c-cellar-line);
  --line-soft: var(--c-cellar-line-soft);
  --accent:      var(--c-gold-lift);
  --accent-cool: var(--c-turquoise-lift);
  --accent-warm: var(--c-beeswax-lift);
  --accent-clay: var(--c-benma-lift);
  --accent-red:  var(--c-cinnabar-lift);
  background: var(--bg);
  color: var(--fg);
}

[data-surface="paper"] {
  --bg:        var(--c-paper);
  --bg-raised: var(--c-paper-raised);
  --fg:        var(--c-ink);
  --fg-muted:  var(--c-stone-700);
  --fg-faint:  var(--c-stone-500);
  --line:      var(--c-paper-line);
  --line-soft: var(--c-paper-line-soft);
  --accent:      var(--c-gold);
  --accent-cool: var(--c-turquoise);
  --accent-warm: var(--c-beeswax);
  --accent-clay: var(--c-benma);
  --accent-red:  var(--c-cinnabar);
  background: var(--bg);
  color: var(--fg);
}