/* 葉山管工 デザインシステム — Bundled styles */

/* ── tokens/fonts.css ── */
/* ============================================================
   葉山管工 — Webfonts
   Loaded from Google Fonts CDN (CJK binaries are too large to
   self-host). Consumers pick these up automatically via styles.css.
   ── If self-hosting is required later, swap this @import for
      local @font-face rules pointing at tokens/fonts/*.woff2.
   ============================================================ */

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


/* ── tokens/colors.css ── */
/* ============================================================
   葉山管工 — Color tokens
   インク（ネイビー）と紙（アイボリー）、古布のローズ、スレート。
   彩度は終始低く。白は紙の白、黒はインクの黒で代替する。
   ============================================================ */

:root {
  /* ---- Ink / ネイビー（インク色・主役の文字と面） ---- */
  --ink-900: #0F1A26;   /* 最暗・見出しの黒に近いインク */
  --ink-800: #14202E;
  --ink-700: #1A2A3A;   /* ★ Primary（指定色） */
  --ink-600: #273C4F;
  --ink-500: #365066;
  --ink-400: #5A7184;
  --ink-300: #8A9CAA;

  /* ---- Paper / アイボリー（紙の色・背景） ---- */
  --paper-000: #FFFFFF;   /* 純白はほぼ使わない */
  --paper-050: #FBF8F2;   /* カード等の明るい面 */
  --paper-100: #F6F2EA;   /* ★ Background（指定色・紙） */
  --paper-200: #EFE9DC;   /* 沈めた面・帯 */
  --paper-300: #E5DDCC;   /* 罫・縁 */

  /* ---- Rose / ダスティローズ（古布のくすみピンク・アクセント） ---- */
  --rose-700: #8F635B;    /* 文字に乗せられる濃いローズ */
  --rose-600: #A06F66;
  --rose-500: #B8867E;    /* ★ Accent（指定色） */
  --rose-300: #D6B6AF;    /* 面・タグの地 */
  --rose-100: #ECD9D3;    /* ごく淡い地 */

  /* ---- Highlight / ハイライトブルー（少しvivid・差し色／リンク強調） ----
     編集誌の静けさを保ちつつ、ここぞの一点に効かせる澄んだ青。 */
  --blue-700: #14568C;    /* 濃い・文字に乗る */
  --blue-500: #2C7FC2;    /* ★ Highlight（少しvivid） */
  --blue-300: #8CB9DF;    /* 面・図版 */
  --blue-100: #DEEAF5;    /* ごく淡い地 */

  /* ---- Slate / スレートグレー（補助・キャプション） ---- */
  --slate-700: #5A5E60;
  --slate-500: #7A7E80;   /* ★ Sub（指定色） */
  --slate-300: #A7ABAC;
  --slate-100: #D7D9D8;

  /* ============================================================
     Semantic aliases — 意味で呼ぶ
     ============================================================ */
  --color-bg:            var(--paper-100);   /* ページ地（紙） */
  --color-bg-deep:       var(--paper-200);   /* 沈めたセクション */
  --color-surface:       var(--paper-050);   /* カード面 */
  --color-surface-ink:   var(--ink-700);     /* 反転（フッター等） */

  --text-strong:         var(--ink-900);     /* 見出し */
  --text-body:           var(--ink-700);     /* 本文 */
  --text-muted:          var(--slate-500);   /* 補足・日付・キャプション */
  --text-on-ink:         var(--paper-100);   /* 反転地の文字 */
  --text-on-ink-muted:   var(--ink-300);     /* 反転地の補足 */

  --accent:              var(--rose-500);    /* アクセント */
  --accent-strong:       var(--rose-700);    /* アクセント文字 */
  --accent-tint:         var(--rose-100);    /* アクセントの地 */

  --highlight:           var(--blue-500);    /* ハイライト（差し色・強調） */
  --highlight-strong:    var(--blue-700);    /* ハイライト文字 */
  --highlight-tint:      var(--blue-100);    /* ハイライトの地 */

  --rule:                var(--paper-300);   /* 標準の罫（紙地の上） */
  --rule-strong:         var(--ink-700);     /* インクの罫・下線 */
  --rule-on-ink:         #FFFFFF1F;          /* 反転地の罫 */

  --link:                var(--ink-700);
  --link-hover:          var(--rose-700);
  --focus-ring:          var(--rose-500);
}


/* ── tokens/typography.css ── */
/* ============================================================
   葉山管工 — Typography tokens
   見出しは Noto Serif JP（明朝・編集誌の質感）。
   本文は Noto Sans JP。英文の表情は Cormorant Garamond、
   ラベル/英数の実務は Inter。サイズコントラストは大胆に。
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif:      "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:       "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en-display: "Cormorant Garamond", "Noto Serif JP", serif;
  --font-en:         "Inter", "Noto Sans JP", sans-serif;

  /* ---- Weights ---- */
  --w-light:   300; /* @kind font */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semibold:600; /* @kind font */
  --w-bold:    700; /* @kind font */

  /* ---- Type scale（編集誌：見出しは大きく、本文は静かに） ---- */
  --fs-display:  clamp(2.75rem, 6vw, 5rem);     /* @kind font */
  --fs-h1:       clamp(2rem, 3.6vw, 3rem);      /* @kind font */
  --fs-h2:       clamp(1.5rem, 2.4vw, 2rem);    /* @kind font */
  --fs-h3:       1.25rem;                        /* 小見出し @kind font */
  --fs-lead:     1.1875rem;                      /* リード文 @kind font */
  --fs-body:     1rem;                           /* 本文 @kind font */
  --fs-small:    0.875rem;                        /* 補足 @kind font */
  --fs-caption:  0.75rem;                         /* キャプション @kind font */
  --fs-eyebrow:  0.6875rem;                       /* ラベル @kind font */

  /* ---- Line heights ---- */
  --lh-tight:  1.18;   /* @kind font */
  --lh-snug:   1.4;    /* @kind font */
  --lh-body:   1.85;   /* @kind font */
  --lh-relaxed:2.0;    /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: 0.02em;   /* @kind font */
  --ls-body:    0.02em;   /* @kind font */
  --ls-eyebrow: 0.22em;   /* 英ラベル @kind font */
  --ls-label:   0.16em;   /* @kind font */

  /* ============================================================
     Semantic role aliases
     ============================================================ */
  --type-display:  var(--w-medium) var(--fs-display)/var(--lh-tight) var(--font-serif); /* @kind font */
  --type-h1:       var(--w-medium) var(--fs-h1)/var(--lh-tight) var(--font-serif); /* @kind font */
  --type-h2:       var(--w-medium) var(--fs-h2)/var(--lh-snug) var(--font-serif); /* @kind font */
  --type-h3:       var(--w-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans); /* @kind font */
  --type-lead:     var(--w-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-sans); /* @kind font */
  --type-body:     var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
  --type-small:    var(--w-regular) var(--fs-small)/var(--lh-snug) var(--font-sans); /* @kind font */
}


/* ── tokens/spacing.css ── */
/* ============================================================
   葉山管工 — Spacing & layout tokens
   余白は大胆に。セクション間は「普通の倍」を基準値にする。
   ============================================================ */

:root {
  /* ---- Base spacing scale (4px grid) ---- */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 11rem;     /* 176 — 章の切れ目 */

  /* ---- Section rhythm（大胆な余白） ---- */
  --section-y:    clamp(5rem, 11vw, 11rem);   /* @kind spacing */
  --section-gap:  clamp(3rem, 6vw, 6rem);     /* @kind spacing */

  /* ---- Page measure（読みやすい段組み幅） ---- */
  --measure:      66ch;       /* 本文の最適行長 */
  --content-max:  1200px;     /* 標準コンテンツ幅 */
  --content-wide: 1440px;     /* ワイド（マップ等） */
  --content-text: 760px;      /* 記事・手紙の幅 */
  --gutter:       clamp(1.25rem, 5vw, 5rem);  /* @kind spacing */

  /* ---- Radii（角丸は控えめ。紙と罫の世界） ---- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* ---- Hairline ---- */
  --hair: 1px;

  /* ---- Z ---- */
  --z-header: 100;  /* @kind other */
  --z-overlay: 200; /* @kind other */
}


/* ── tokens/elevation.css ── */
/* ============================================================
   葉山管工 — Elevation, borders, motion
   影はほぼ使わない。紙の上の罫と、ごく淡い沈みで階層を作る。
   動きは控えめなフェードとスライド。バウンスはしない。
   ============================================================ */

:root {
  /* ---- Shadows（極めて控えめ・紙の沈み） ---- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(26, 42, 58, 0.04),
                 0 8px 24px rgba(26, 42, 58, 0.05);
  --shadow-raised: 0 2px 4px rgba(26, 42, 58, 0.06),
                   0 18px 40px rgba(26, 42, 58, 0.10);
  --shadow-overlay: 0 24px 64px rgba(15, 26, 38, 0.22);

  /* ---- Borders ---- */
  --border-hair:   var(--hair) solid var(--rule);
  --border-ink:    var(--hair) solid var(--rule-strong);
  --border-soft:   var(--hair) solid var(--paper-300);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.2, 1);       /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   480ms;  /* @kind other */

  /* ---- Image treatment（彩度低め・自然光トーン） ---- */
  --img-filter:        grayscale(0.5) contrast(0.95) brightness(1.02);   /* @kind other */
  --img-filter-mono:   grayscale(0.9) contrast(0.98) brightness(1.0);    /* @kind other */
  --img-placeholder:   linear-gradient(135deg, var(--paper-200), var(--paper-300));  /* @kind other */
}


/* ── tokens/base.css ── */
/* ============================================================
   葉山管工 — Base elements & shared utilities
   トークンの上に乗る最小限の地。ページはここから書き始める。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
p { margin: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--link-hover); }

img { display: block; max-width: 100%; }

::selection { background: var(--rose-300); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---- Eyebrow（英・トラッキング大のラベル） ---- */
.hk-eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- 章番号（Cormorant の英数） ---- */
.hk-index {
  font-family: var(--font-en-display);
  font-weight: var(--w-medium);
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---- 縦罫つきセクション見出しのリズム ---- */
.hk-measure { max-width: var(--measure); }

/* ---- 矢印リンク（テキスト＋罫＋矢印のミニマル表現） ---- */
.hk-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  color: var(--text-strong);
  padding-bottom: 0.4em;
  border-bottom: var(--hair) solid var(--rule-strong);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              gap var(--dur-base) var(--ease-out);
}
.hk-arrow .arw { transition: transform var(--dur-base) var(--ease-out); }
.hk-arrow:hover { color: var(--accent-strong); border-color: var(--accent); gap: 0.9em; }
.hk-arrow:hover .arw { transform: translateX(3px); }

/* ---- 罫線が左から右へ伸びるインライン・リンク ---- */
.hk-ulink {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.hk-ulink:hover { background-size: 100% 1px; color: var(--link-hover); }

/* ---- スクロール連動の控えめなフェードイン（プログレッシブ・エンハンスメント） ----
   既定は表示。JS が hk-armed を付けたときだけ隠して、見えたら is-in で出す。
   JS/IO が動かない環境でも、コンテンツは必ず見える。 */
.hk-reveal.hk-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.hk-reveal.hk-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .hk-reveal, .hk-reveal.hk-armed { opacity: 1 !important; transform: none !important; }
}