/* =========================================================
   Mayumi Minami Healing — Design Tokens
   Luxury spa · refined · gold accents · serif elegance
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&family=Shippori+Mincho:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cormorant+Infant:ital,wght@0,400;0,500;1,300&display=swap');

:root {
  /* ---------- Color · Base Surfaces ---------- */
  --mm-ivory:        #F7F2EA;   /* page background, warm off-white */
  --mm-cream:        #EFE6D6;   /* secondary surface, soft champagne */
  --mm-pearl:        #FBF8F2;   /* lifted surface, near-white */
  --mm-mist:         #E8DECB;   /* divider, muted sand */
  --mm-stone:        #C9BCA1;   /* tertiary, dusty taupe */

  /* ---------- Color · Ink (text) ---------- */
  --mm-ink:          #1F2638;   /* primary text — deep indigo / 墨紺 */
  --mm-ink-soft:     #3C4356;   /* secondary text */
  --mm-ink-mute:     #6B6A66;   /* tertiary text, captions */
  --mm-ink-faint:    #A89F8E;   /* placeholder, hairline labels */

  /* ---------- Color · Accent (gold + rose) ---------- */
  --mm-gold:         #B8965A;   /* primary accent, brushed gold */
  --mm-gold-deep:    #97783F;   /* hover, pressed */
  --mm-gold-light:   #D6BA86;   /* highlight, soft */
  --mm-gold-tint:    #F0E4CB;   /* surface tint */

  --mm-rose:         #C9928A;   /* warmth accent, dusty rose */
  --mm-rose-soft:    #E8D2C9;   /* surface tint */
  --mm-sage:         #8FA08C;   /* secondary accent, healing green */
  --mm-sage-soft:    #D6DDD0;

  /* ---------- Color · Semantic ---------- */
  --mm-bg:           var(--mm-ivory);
  --mm-bg-alt:       var(--mm-cream);
  --mm-bg-lifted:    var(--mm-pearl);
  --mm-fg:           var(--mm-ink);
  --mm-fg-soft:      var(--mm-ink-soft);
  --mm-fg-mute:      var(--mm-ink-mute);
  --mm-fg-faint:     var(--mm-ink-faint);
  --mm-accent:       var(--mm-gold);
  --mm-accent-deep:  var(--mm-gold-deep);
  --mm-line:         #D9CDB4;   /* hairline divider */
  --mm-line-soft:    #E8DECB;

  /* ---------- Type · Families ---------- */
  --mm-font-display: "Shippori Mincho", "Noto Serif JP", "游明朝", "YuMincho", serif;
  --mm-font-serif-jp:"Noto Serif JP", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
  --mm-font-serif-en:"Cormorant Garamond", "Cormorant Infant", "Shippori Mincho", serif;
  --mm-font-accent:  "Cormorant Infant", "Cormorant Garamond", serif;  /* italic small caps moments */
  --mm-font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---------- Type · Scale (LP, 1440 base) ---------- */
  --mm-fs-hairline:  11px;   /* tracked-out labels — typically EN */
  --mm-fs-caption:   12px;
  --mm-fs-small:     13px;
  --mm-fs-body:      15px;
  --mm-fs-body-lg:   17px;
  --mm-fs-lead:      19px;
  --mm-fs-h6:        20px;
  --mm-fs-h5:        24px;
  --mm-fs-h4:        30px;
  --mm-fs-h3:        38px;
  --mm-fs-h2:        48px;
  --mm-fs-h1:        64px;
  --mm-fs-display:   88px;

  /* ---------- Type · Weight ---------- */
  --mm-fw-light:     300;
  --mm-fw-regular:   400;
  --mm-fw-medium:    500;
  --mm-fw-semi:      600;
  --mm-fw-bold:      700;

  /* ---------- Type · Leading & tracking ---------- */
  --mm-lh-tight:     1.2;
  --mm-lh-snug:      1.4;
  --mm-lh-normal:    1.7;     /* JP body — generous */
  --mm-lh-loose:     2.0;     /* JP long-form */
  --mm-tr-hairline:  0.32em;  /* EN labels, tracked out wide */
  --mm-tr-wide:      0.16em;
  --mm-tr-default:   0.04em;
  --mm-tr-jp:        0.08em;  /* JP display — slight breathing */

  /* ---------- Spacing (8pt base, generous for spa feel) ---------- */
  --mm-s-1:          4px;
  --mm-s-2:          8px;
  --mm-s-3:          12px;
  --mm-s-4:          16px;
  --mm-s-5:          24px;
  --mm-s-6:          32px;
  --mm-s-7:          48px;
  --mm-s-8:          64px;
  --mm-s-9:          96px;
  --mm-s-10:         128px;
  --mm-s-11:         160px;

  /* ---------- Radii (low — luxury reads sharper) ---------- */
  --mm-r-sm:         2px;
  --mm-r-md:         4px;
  --mm-r-lg:         8px;
  --mm-r-pill:       999px;
  --mm-r-circle:     50%;

  /* ---------- Shadows (soft, never sharp) ---------- */
  --mm-shadow-soft:    0 1px 2px rgba(31, 38, 56, 0.04), 0 8px 24px rgba(31, 38, 56, 0.06);
  --mm-shadow-lifted:  0 2px 4px rgba(31, 38, 56, 0.05), 0 16px 40px rgba(31, 38, 56, 0.10);
  --mm-shadow-deep:    0 4px 8px rgba(31, 38, 56, 0.06), 0 32px 64px rgba(31, 38, 56, 0.14);
  --mm-shadow-gold:    0 8px 24px rgba(184, 150, 90, 0.18);

  /* ---------- Borders ---------- */
  --mm-border:         1px solid var(--mm-line);
  --mm-border-soft:    1px solid var(--mm-line-soft);
  --mm-border-gold:    1px solid var(--mm-gold);
  --mm-border-hair:    0.5px solid var(--mm-stone);

  /* ---------- Motion ---------- */
  --mm-ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --mm-ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --mm-dur-fast:       180ms;
  --mm-dur-base:       320ms;
  --mm-dur-slow:       640ms;
}

/* =========================================================
   Semantic typography — drop on a wrapper to opt in
   ========================================================= */

.mm-type {
  color: var(--mm-fg);
  font-family: var(--mm-font-serif-jp);
  font-weight: var(--mm-fw-regular);
  line-height: var(--mm-lh-normal);
  letter-spacing: var(--mm-tr-default);
  font-feature-settings: "palt" 1;   /* JP optical kerning */
}

.mm-type h1, .mm-h1 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-medium);
  font-size: var(--mm-fs-h1);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-tr-jp);
  color: var(--mm-fg);
  margin: 0;
}

.mm-type h2, .mm-h2 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-medium);
  font-size: var(--mm-fs-h2);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-tr-jp);
  color: var(--mm-fg);
  margin: 0;
}

.mm-type h3, .mm-h3 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-medium);
  font-size: var(--mm-fs-h3);
  line-height: var(--mm-lh-snug);
  letter-spacing: var(--mm-tr-jp);
  margin: 0;
}

.mm-type h4, .mm-h4 {
  font-family: var(--mm-font-serif-jp);
  font-weight: var(--mm-fw-semi);
  font-size: var(--mm-fs-h4);
  line-height: var(--mm-lh-snug);
  letter-spacing: var(--mm-tr-jp);
  margin: 0;
}

.mm-type h5, .mm-h5 {
  font-family: var(--mm-font-serif-jp);
  font-weight: var(--mm-fw-semi);
  font-size: var(--mm-fs-h5);
  line-height: var(--mm-lh-snug);
  letter-spacing: var(--mm-tr-jp);
  margin: 0;
}

.mm-type h6, .mm-h6 {
  font-family: var(--mm-font-serif-jp);
  font-weight: var(--mm-fw-semi);
  font-size: var(--mm-fs-h6);
  line-height: var(--mm-lh-snug);
  letter-spacing: var(--mm-tr-jp);
  margin: 0;
}

.mm-type p, .mm-p {
  font-family: var(--mm-font-serif-jp);
  font-size: var(--mm-fs-body);
  line-height: var(--mm-lh-loose);
  letter-spacing: var(--mm-tr-jp);
  color: var(--mm-fg-soft);
  margin: 0;
}

.mm-lead {
  font-family: var(--mm-font-serif-jp);
  font-size: var(--mm-fs-lead);
  line-height: var(--mm-lh-loose);
  letter-spacing: var(--mm-tr-jp);
  color: var(--mm-fg-soft);
  font-weight: var(--mm-fw-regular);
}

.mm-caption {
  font-family: var(--mm-font-serif-jp);
  font-size: var(--mm-fs-caption);
  line-height: var(--mm-lh-snug);
  letter-spacing: var(--mm-tr-wide);
  color: var(--mm-fg-mute);
}

/* English accent — used for section eyebrows, numbers, ornaments */
.mm-eyebrow {
  font-family: var(--mm-font-serif-en);
  font-style: italic;
  font-weight: var(--mm-fw-light);
  font-size: var(--mm-fs-h6);
  letter-spacing: var(--mm-tr-default);
  color: var(--mm-accent);
}

.mm-label {
  font-family: var(--mm-font-serif-en);
  font-weight: var(--mm-fw-medium);
  font-size: var(--mm-fs-hairline);
  letter-spacing: var(--mm-tr-hairline);
  text-transform: uppercase;
  color: var(--mm-accent-deep);
}

.mm-display-en {
  font-family: var(--mm-font-serif-en);
  font-weight: var(--mm-fw-light);
  font-style: italic;
  font-size: var(--mm-fs-display);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--mm-fg);
}

/* Hairline divider, gold */
.mm-rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--mm-accent);
  vertical-align: middle;
}
.mm-rule-long { width: 96px; }
.mm-rule-short { width: 24px; }

/* Number ornament for sections (01, 02 …) */
.mm-numeral {
  font-family: var(--mm-font-serif-en);
  font-style: italic;
  font-weight: var(--mm-fw-light);
  font-size: var(--mm-fs-h2);
  color: var(--mm-accent);
  letter-spacing: 0.02em;
}