/* ── portal-tokens.css ───────────────────────────────────────────────────────
   The single source of truth for the HS MUSIC STUDIO members-portal visual layer
   — the "luxury" booking brand: gold-on-ink + cream paper, Cormorant Garamond
   display over Jost body, EST. SINGAPORE. Extracted verbatim from the design team's
   canvas (docs/design/), whose exact hex + type scale this file preserves.

   BRAND SEPARATION (deliberate — see journal.txt): this is a DIFFERENT brand from
   the Heartstrings Theory Gym (shared/design-tokens.css, `--hs-*`, warm-dark
   walnut/Nunito). Entering Learn is a brand HANDOFF from this portal skin to the
   Heartstrings cream. So these tokens are prefixed `--pt-*` and never merged with
   `--hs-*`; both live in the repo, each owning its surface.

   TWO SURFACE MODES inside the one luxury brand:
     • PAPER (light) — the booking flow, forms, receipts: cream #FBFAF6, ink text.
     • NIGHT (dark)  — hero, membership, chrome: ink #0E0E10, cream-on-dark.
   Components choose their mode; the gold ramp + taupes are shared across both.
─────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500&display=swap');

:root {
  /* ── type families ── */
  --pt-display: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;   /* headings */
  --pt-sans:    'Jost', 'Noto Sans SC', -apple-system, sans-serif;       /* body / UI */
  --pt-cjk-serif: 'Noto Serif SC', serif;
  --pt-cjk-sans:  'Noto Sans SC', sans-serif;

  /* ── gold ramp (the accent, shared across both surfaces) ── */
  --pt-gold:        #B68A44;   /* primary gold — kickers, the H mark, key accents */
  --pt-gold-lt:     #D3B981;   /* light gold — highlights, active states          */
  --pt-gold-deep:   #8A6E37;   /* deep gold — pressed / on-cream emphasis         */
  --pt-gold-line:   rgba(211,185,129,0.16);  /* gold hairline on dark             */
  --pt-gold-dim:    rgba(182,138,68,0.10);   /* gold wash / tint                  */

  /* ── PAPER surface (light — booking, forms, receipts) ── */
  --pt-paper:       #FBFAF6;   /* page / paper background                          */
  --pt-paper-2:     #F4F2EC;   /* insets, subtle panels                            */
  --pt-paper-3:     #F2E9D7;   /* warm cream panels / promo rows                   */
  --pt-ink:         #211C16;   /* primary text on paper (near-black warm)          */
  --pt-ink-body:    #564E41;   /* body copy on paper                               */
  /* 🔴 was #8B8578, which is 3.7:1 on white — under the 4.5:1 a caption needs,
     and this token dresses ~30 places on the booking page: service meta, format
     sub-labels, field labels, the slot note. The owner read the page as washed
     out and was right. #6F6A5E is 5.4:1 and still clearly secondary next to
     --pt-ink-body (8.4:1), so the hierarchy survives the legibility fix. */
  --pt-ink-soft:    #6F6A5E;   /* secondary / captions on paper                    */
  --pt-line:        rgba(33,28,22,0.16);     /* ink hairline borders on paper      */
  --pt-field:       #FFFFFF;   /* the inside of an input, on paper                 */

  /* ── NIGHT surface (dark — hero, membership, chrome) ── */
  --pt-night:       #0E0E10;   /* darkest chrome / hero background                 */
  --pt-night-2:     #14130F;   /* warm near-black panels                           */
  --pt-night-3:     #211C16;   /* lifted dark panels (shares the ink hue)          */
  --pt-cream:       #FBFAF6;   /* primary text on night                            */
  --pt-cream-soft:  #CBBFA3;   /* secondary text on night                          */
  --pt-cream-mute:  #7D7257;   /* captions / kickers on night                      */
  --pt-cream-dim:   #615840;   /* faint labels on night                           */
  --pt-line-dk:     rgba(211,185,129,0.16);  /* gold hairline on night             */

  /* ── feedback ── */
  --pt-sage:        #7A7466;   /* muted neutral / disabled                         */
  --pt-scroll:      rgba(150,138,112,0.32);  /* scrollbar thumb                    */

  /* ── type scale (from the design canvas) ── */
  --pt-kicker-size: 11px;      --pt-kicker-track: 0.24em;   /* uppercase gold kicker */
  --pt-h1-size:     46px;      --pt-h1-line: 1.04;  --pt-h1-track: -0.01em;  --pt-h1-weight: 500;
  --pt-h2-size:     29px;
  --pt-body-size:   14.5px;    --pt-body-line: 1.7;  --pt-body-weight: 300;

  /* ── shape ── */
  --pt-radius:      8px;        /* controls, cards, lang toggle                     */
  --pt-radius-lg:   16px;       /* large panels                                     */
  --pt-shadow:      0 18px 50px rgba(20,19,15,0.18);
}

/* ── base helpers (opt-in classes; components may also inline per the design) ── */
.pt-kicker {
  font-family: var(--pt-sans);
  font-size: var(--pt-kicker-size);
  letter-spacing: var(--pt-kicker-track);
  text-transform: uppercase;
  color: var(--pt-gold);
}
.pt-h1 {
  font-family: var(--pt-display);
  font-weight: var(--pt-h1-weight);
  font-size: var(--pt-h1-size);
  line-height: var(--pt-h1-line);
  letter-spacing: var(--pt-h1-track);
  margin: 0;
}
.pt-body {
  font-family: var(--pt-sans);
  font-size: var(--pt-body-size);
  line-height: var(--pt-body-line);
  font-weight: var(--pt-body-weight);
  color: var(--pt-ink-body);
}
.pt-paper { background: var(--pt-paper); color: var(--pt-ink); }
.pt-night { background: var(--pt-night); color: var(--pt-cream); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--pt-scroll); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── CJK typographic refinement (verbatim intent from the design): Chinese needs
      its own metrics — heavier leading reads calmer/premium, display weights soften,
      spaced-uppercase Latin kickers tighten so they don't read awkward as 中文. ── */
[lang="zh"] h1:not([data-greet]), [lang="zh"] h2, [lang="zh"] h3 {
  font-weight: 400 !important;
  letter-spacing: 0.012em !important;
  line-height: 1.32 !important;
  text-wrap: balance;
}
[lang="zh"] h1:not([data-greet]) { font-size: 39px !important; }
[lang="zh"] h2 { font-size: 29px !important; }
[lang="zh"] p { line-height: 1.85 !important; font-weight: 300 !important; }
[lang="zh"] .pt-kicker, [lang="zh"] [data-kicker] { letter-spacing: 0.18em !important; }

@keyframes ptSectionIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ══ DARK MODE ══════════════════════════════════════════════════════════
   🔴 The point of this block is NOT taste, it is control. A phone in dark
   mode force-darkens any page that does not say it handles dark itself, and
   the result is text the browser has guessed a colour for — which is why
   words went missing on the booking page. Declaring color-scheme AND shipping
   a real dark palette makes the browser stand down and use ours.

   Only the PAPER tokens move. Everything is built on them, so the booking
   flow and the admin sheet become warm-dark together, and the night surfaces
   are already dark and stay put. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --pt-paper:     #0E0E10;   /* EXACTLY --pt-night: in the dark there is one surface, not two */
    --pt-paper-2:   #14130F;   /* exactly --pt-night-2, so a card looks the same everywhere     */
    --pt-paper-3:   #211C16;   /* exactly --pt-night-3                                         */
    --pt-field:     #100F0C;   /* the inside of an input                          */
    --pt-ink:       #FBFAF6;   /* primary text                                    */
    --pt-ink-body:  #D6CFC1;   /* body copy                                       */
    --pt-ink-soft:  #9A9184;   /* captions                                        */
    --pt-line:      rgba(251,250,246,0.17);
  }
}