/* ==========================================================================
   Amu — Design System Tokens
   Colors + Typography
   ==========================================================================
   Color names align with the official Figma style library:
     Base Background (#C3BCB2)  → --amu-base-bg
     Base White      (#EDEBE4)  → --amu-base-white
     Grey Black      (#B5AEA3)  → --amu-grey-black
     Accent Black    (#4D4B49)  → --amu-accent-black
     Accent Red      (#C93400)  → --amu-accent-red
     Ink             (#292826)  → --amu-ink   (primary text / dark bg)
   ========================================================================== */

/* ---------- Fonts ----------
   Japanese body is set in A1 Gothic Std Light (300). Medium (500) is used
   only for emphasis in short labels. Bold is intentionally NOT registered;
   Amu JP 本文に太字は使わない。
*/
@font-face {
  font-family: "Palatino Sans LT Pro";
  src: url("./fonts/PalatinoSansLTPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Sans LT Pro";
  src: url("./fonts/PalatinoSansLTPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "A1 Gothic Std";
  src: url("./fonts/A1GothicStdN-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "A1 Gothic Std";
  src: url("./fonts/A1GothicStd-Light.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "A1 Gothic Std";
  src: url("./fonts/A1GothicStd-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "A1 Gothic Std";
  src: url("./fonts/A1GothicStd-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color primitives (Figma-aligned) ---------- */
  --amu-ink:            #292826;  /* primary text / dark bg */
  --amu-accent-black:   #4D4B49;  /* 2nd text / 1px border (low-emphasis UI) */
  --amu-base-white:     #EDEBE4;  /* primary light bg / on-dark fg */
  --amu-base-bg:        #C3BCB2;  /* base background for sand sections */
  --amu-grey-black:     #B5AEA3;  /* low-priority UI ground (chips, dividers) */
  --amu-accent-red:     #C93400;  /* the single accent — dotted, never spread */

  --amu-white:          #FFFFFF;
  --amu-black:          #000000;

  /* Shadow tokens — very soft, used sparingly */
  --amu-shadow-sm:  0 1px 4px 0 rgba(0,0,0,0.15);
  --amu-shadow-md:  0 2px 5px 0 rgba(0,0,0,0.15);
  --amu-shadow-lg:  0 1px 11px 0 rgba(0,0,0,0.20);
  --amu-shadow-cv:  0 2px 4px 0 rgba(0,0,0,0.10);

  /* ---------- Semantic colors ---------- */
  --fg-1: var(--amu-ink);
  --fg-2: var(--amu-accent-black);
  --fg-on-dark: var(--amu-base-white);
  --fg-on-dark-2: var(--amu-grey-black);  /* dimmed fg on dark */

  --bg-1: var(--amu-base-white);    /* default page */
  --bg-2: var(--amu-base-bg);       /* sand section */
  --bg-dark: var(--amu-ink);        /* dark section */
  --bg-chip: var(--amu-grey-black); /* chip / subtle pill */

  --stroke-1: var(--amu-accent-black);  /* 1px primary border */
  --stroke-2: var(--amu-grey-black);    /* subtle divider */
  --stroke-on-dark: var(--amu-grey-black);

  --accent: var(--amu-accent-red);
  --accent-fg: var(--amu-base-white);

  /* ---------- Radii (Amu rule: "少しの角丸" — tiny radii only) ---------- */
  --radius-xs: 2.5px;
  --radius-sm: 3.5px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 9px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-pill: 29px;
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --border-hair: 0.5px solid var(--stroke-1);
  --border-thin: 1px solid var(--stroke-1);
  --border-subtle: 1px solid var(--stroke-2);
  --border-dash: 1px dashed var(--stroke-1);
  --border-dash-on-dark: 0.5px dashed var(--stroke-on-dark);

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 110px;
  --space-12: 160px;

  /* ---------- Type families ---------- */
  --font-latin: "Palatino Sans LT Pro", "Palatino", Georgia, serif;
  --font-jp: "A1 Gothic Std", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Tracking ---------- */
  --track-jp-display:  -0.03em;  /* 大見出しJP */
  --track-jp-heading:  -0.01em;  /* 見出しJP */
  --track-jp-base:      0.10em;  /* 本文JP */
  --track-jp-wide:      0.13em;  /* キャプションJP */
  --track-jp-emph:      0.20em;  /* 強調JP（広げる） */
  --track-latin:        0.01em;
  --track-latin-wide:   0.06em;
  --track-latin-display: 0.02em;

  /* ---------- Line heights ---------- */
  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-display: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.68;
  --lh-prose: 1.75;
  --lh-lux: 2.5;
  --lh-airy: 3;

  /* ==========================================================================
     Type scale — 10 tiers (+ Caption)
     desktop values. Mobile values are set via @media below.
     ========================================================================== */

  /* Display (Hero / 章扉 / 引用) */
  --fs-display-xl-latin: 140px;   /* Hero Latin — site-wide max */
  --fs-display-xl-jp:    96px;    /* Hero JP — 日本語は少し控えめ */
  --fs-display-l-latin:  96px;
  --fs-display-l-jp:     72px;
  --fs-display-s-latin:  60px;
  --fs-display-s-jp:     44px;

  /* Headings (H1–H4) */
  --fs-h1-latin: 44px;
  --fs-h1-jp:    36px;
  --fs-h2-latin: 32px;
  --fs-h2-jp:    28px;
  --fs-h3-latin: 24px;
  --fs-h3-jp:    22px;
  --fs-h4-latin: 18px;
  --fs-h4-jp:    18px;

  /* Body */
  --fs-body-l-latin: 17px;
  --fs-body-l-jp:    16px;
  --fs-body-m-latin: 15px;
  --fs-body-m-jp:    14px;
  --fs-body-s-latin: 13px;
  --fs-body-s-jp:    13px;

  /* Caption */
  --fs-caption-latin: 11px;
  --fs-caption-jp:    11px;

  /* Counter (大きな連番 01/02/03) */
  --fs-counter-latin: 140px;
}

/* Mobile overrides — apply below 640px.
   393px (Figma mobile frame) と 414px を想定した段階。*/
@media (max-width: 640px) {
  :root {
    --fs-display-xl-latin: 64px;
    --fs-display-xl-jp:    44px;
    --fs-display-l-latin:  48px;
    --fs-display-l-jp:     36px;
    --fs-display-s-latin:  40px;
    --fs-display-s-jp:     30px;

    --fs-h1-latin: 32px;
    --fs-h1-jp:    28px;
    --fs-h2-latin: 26px;
    --fs-h2-jp:    22px;
    --fs-h3-latin: 22px;
    --fs-h3-jp:    20px;
    --fs-h4-latin: 17px;
    --fs-h4-jp:    17px;

    --fs-body-l-latin: 16px;
    --fs-body-l-jp:    15px;
    --fs-body-m-latin: 14px;
    --fs-body-m-jp:    14px;

    --fs-counter-latin: 96px;
  }
}

/* ==========================================================================
   Semantic typography classes — 10段階 × Latin / JP
   ==========================================================================
   JP RULE: body/見出しは A1 Gothic Light (300) のみ。Medium (500) は
   英字ラベル内の短い強調だけ。Bold / 700 は使用不可。強調は:
     - 色を accent (朱) に落とす    → .amu-em
     - 行間を airy (3.0) に広げる    → .amu-em-airy
     - tracking を 0.20em に広げる   → .amu-em-wide
     - 記号で囲う（■ ●）
   で表現する。決して font-weight: bold / 700 を当てない。
*/

/* ---------- Display (Hero / 章扉) ---------- */
.amu-display-xl-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-display-xl-latin);
  line-height: var(--lh-display);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-display-xl-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-display-xl-jp);
  line-height: var(--lh-display);
  letter-spacing: var(--track-jp-display);
  color: var(--fg-1);
}
.amu-display-l-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-display-l-latin);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin-display);
  color: var(--fg-1);
}
.amu-display-l-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-display-l-jp);
  line-height: var(--lh-display);
  letter-spacing: var(--track-jp-display);
  color: var(--fg-1);
}
.amu-display-s-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-display-s-latin);
  line-height: var(--lh-snug);
  letter-spacing: 0.03em;
  color: var(--fg-1);
}
.amu-display-s-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-display-s-jp);
  line-height: var(--lh-display);
  letter-spacing: var(--track-jp-display);
  color: var(--fg-1);
}

/* ---------- Headings (H1–H4) ---------- */
.amu-h1-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-h1-latin);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin-display);
  color: var(--fg-1);
}
.amu-h1-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-h1-jp);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-jp-heading);
  color: var(--fg-1);
}
.amu-h2-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-h2-latin);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin-display);
  color: var(--fg-1);
}
.amu-h2-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-h2-jp);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-jp-heading);
  color: var(--fg-1);
}
.amu-h3-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-h3-latin);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-h3-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-h3-jp);
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  color: var(--fg-1);
}
.amu-h4-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-h4-latin);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-h4-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-h4-jp);
  line-height: var(--lh-heading);
  letter-spacing: 0.08em;
  color: var(--fg-1);
}

/* ---------- Body (L / M / S) ---------- */
.amu-body-l-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-body-l-latin);
  line-height: var(--lh-body);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-body-l-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-body-l-jp);
  line-height: var(--lh-prose);
  letter-spacing: var(--track-jp-base);
  color: var(--fg-1);
}
.amu-body-m-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-body-m-latin);
  line-height: var(--lh-body);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-body-m-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-body-m-jp);
  line-height: var(--lh-prose);
  letter-spacing: var(--track-jp-base);
  color: var(--fg-1);
}
.amu-body-s-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-body-s-latin);
  line-height: 1.55;
  letter-spacing: var(--track-latin);
  color: var(--fg-2);
}
.amu-body-s-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-body-s-jp);
  line-height: 1.7;
  letter-spacing: var(--track-jp-base);
  color: var(--fg-2);
}

/* ---------- Caption ---------- */
.amu-caption-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-caption-latin);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-latin-wide);
  color: var(--fg-2);
}
.amu-caption-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-caption-jp);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-jp-base);
  color: var(--fg-2);
}

/* ---------- Counter (01 / 02 / 03) ---------- */
.amu-counter-latin {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: var(--fs-counter-latin);
  line-height: 1;
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}

/* ==========================================================================
   Utility classes — 強調・リンク・ボタン・ラベル
   ========================================================================== */

/* 強調（JP は絶対に font-weight: bold を使わない。代わりに以下を重ねる） */
.amu-em             { color: var(--accent); }                 /* 朱色にする */
.amu-em-wide        { letter-spacing: var(--track-jp-emph); } /* tracking 0.20em */
.amu-em-airy        { line-height: var(--lh-airy); }          /* 行間 3.0 */
.amu-em-boxed::before { content: "■ "; color: var(--accent); margin-right: 0.35em; }
.amu-em-dotted::before{ content: "● "; color: var(--accent); margin-right: 0.35em; }

/* Philosophy copy — 哲学文。airy 行間 + 大きめ tracking */
.amu-prose-airy-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: var(--fs-body-m-jp);
  line-height: var(--lh-airy);
  letter-spacing: var(--track-jp-base);
  color: var(--fg-1);
}

/* Section label — 左上ランプ（13×13 朱色四角）の隣に置く Latin + JP */
.amu-section-label-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-section-label-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-jp-base);
  color: var(--fg-2);
}

/* Kicker — 見出しの上に置く小さなラベル */
.amu-kicker-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-jp-wide);
  color: var(--fg-2);
}
.amu-kicker-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 12px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-latin-wide);
  color: var(--fg-2);
  text-transform: none;  /* Latin headings は sentence-case */
}

/* Link — 下線は hover で現れる。transform は使わない */
.amu-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: opacity 200ms, border-color 200ms;
}
.amu-link:hover {
  opacity: 0.7;
  border-bottom-color: currentColor;
}
.amu-link-accent {
  color: var(--accent);
}
.amu-link-accent:hover {
  opacity: 0.75;
  border-bottom-color: var(--accent);
}

/* Button labels — CTA 内の文字 */
.amu-button-label-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: var(--track-latin-wide);
  color: inherit;
}
.amu-button-label-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--track-jp-base);
  color: inherit;
}

/* Form labels / microcopy */
.amu-form-label-jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 12px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-jp-wide);
  color: var(--fg-2);
}
.amu-meta-latin {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 13px;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}

/* Price — ￥19,800~ のような通貨表記 */
.amu-price {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--track-latin);
  color: var(--fg-1);
}
.amu-price-unit {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--track-latin);
  color: var(--fg-2);
  margin-left: 2px;
}

/* ==========================================================================
   Legacy aliases (before 10-tier refactor)
   既存プロトタイプの互換性のため、旧クラス名を新段階にマップする。
   新規コードでは使わず、上の 10 段階を参照すること。
   ========================================================================== */
.amu-hero-latin     { font-family: var(--font-latin); font-weight: 300;
                      font-size: var(--fs-display-xl-latin); line-height: 1.3;
                      letter-spacing: var(--track-latin); color: var(--fg-1); }
.amu-display-latin  { font-family: var(--font-latin); font-weight: 300;
                      font-size: var(--fs-display-s-latin); line-height: var(--lh-snug);
                      letter-spacing: 0.05em; color: var(--fg-1); }
.amu-display-jp     { font-family: var(--font-jp); font-weight: 300;
                      font-size: var(--fs-display-s-jp); line-height: var(--lh-display);
                      letter-spacing: var(--track-jp-display); color: var(--fg-1); }
.amu-display-jp-mobile { font-family: var(--font-jp); font-weight: 300;
                         font-size: 35px; line-height: var(--lh-display);
                         letter-spacing: var(--track-jp-display); color: var(--fg-1); }
.amu-title-jp       { font-family: var(--font-jp); font-weight: 300;
                      font-size: 24px; line-height: var(--lh-tight);
                      letter-spacing: var(--track-jp-base); color: var(--fg-1); }
.amu-section-label  { font-family: var(--font-latin); font-weight: 400;
                      font-size: 14px; line-height: var(--lh-tight);
                      letter-spacing: var(--track-latin); color: var(--fg-1); }
.amu-body-jp        { font-family: var(--font-jp); font-weight: 300;
                      font-size: var(--fs-body-m-jp); line-height: var(--lh-prose);
                      letter-spacing: var(--track-jp-base); color: var(--fg-1); }
.amu-body-jp-airy   { font-family: var(--font-jp); font-weight: 300;
                      font-size: var(--fs-body-m-jp); line-height: var(--lh-airy);
                      letter-spacing: var(--track-jp-base); color: var(--fg-1); }
.amu-body-jp-sm     { font-family: var(--font-jp); font-weight: 300;
                      font-size: var(--fs-body-s-jp); line-height: 1.7;
                      letter-spacing: var(--track-jp-base); color: var(--fg-2); }
.amu-label-latin    { font-family: var(--font-latin); font-weight: 400;
                      font-size: 15px; line-height: var(--lh-snug);
                      letter-spacing: var(--track-latin); color: var(--fg-1); }
.amu-tiny-latin     { font-family: var(--font-latin); font-weight: 400;
                      font-size: var(--fs-caption-latin); line-height: var(--lh-tight);
                      letter-spacing: var(--track-latin); color: var(--fg-2); }
.amu-kicker         { font-family: var(--font-jp); font-weight: 300;
                      font-size: 14px; line-height: var(--lh-snug);
                      letter-spacing: var(--track-jp-base); color: var(--fg-2); }