/* ============================================================
   PEACE Design System — Colors & Type
   株式会社PEACE / 法人専門ビルメンテナンス
   ============================================================ */

/* ---------- Webfonts (Google Fonts・WOFF2 / unicode-range 最適化) ----------
   2026-07-01 パフォーマンス改修: 本文 Noto Sans JP を自前ホストの巨大OTF
   （Regular/Medium/Bold だけで約11.8MB）から Google Fonts へ移行し大幅軽量化。
   同一フォント＝見た目そのまま・font-display:swap で FOIT 回避・使用ウェイトのみ配信。
   本文 Noto Sans JP ＋ 見出し Shippori Mincho を1リクエストで取得。
   旧 fonts/NotoSansJP-*.otf は未参照（サーバ残置・削除可）。
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Shippori+Mincho:wght@500;600;700;800&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --peace-navy:        #0A2540;  /* Base — ダークネイビー */
  --peace-blue:        #1E5A8C;  /* Secondary — クリアブルー */
  --peace-mint:        #00C7A6;  /* Accent — ミントグリーン (CTAのみ) */

  /* ---------- Neutrals ---------- */
  --bg-app:            #F7F9FC;  /* 柔らかい白 — main background */
  --bg-card:           #FFFFFF;  /* Card surface */
  --bg-elevated:       #FFFFFF;
  --bg-tinted:         #EEF3F8;  /* Subtle blue tint sections */
  --bg-navy-soft:      #0F2E4C;  /* Navy hover/elevated */

  /* ---------- Foregrounds ---------- */
  --fg1:               #0A2540;  /* Primary text — same as navy */
  --fg2:               #3A4A5C;  /* Secondary text */
  --fg3:               #6B7886;  /* Tertiary / captions */
  --fg-muted:          #94A0AE;  /* Disabled / meta */
  --fg-on-navy:        #FFFFFF;
  --fg-on-mint:        #06372F;  /* High contrast on mint */

  /* ---------- Borders & dividers ---------- */
  --border:            #DCE3EB;
  --border-strong:     #B8C4D0;
  --border-on-navy:    rgba(255,255,255,0.16);

  /* ---------- Semantic ---------- */
  --link:              #1E5A8C;
  --link-hover:        #0A2540;
  --cta:               #00C7A6;
  --cta-hover:         #00A88C;
  --cta-press:         #008F77;
  --focus-ring:        #1E5A8C;
  --danger:            #C73E3E;
  --success:           #00C7A6;

  /* ---------- Radii ---------- */
  --r-sm:              4px;
  --r-md:              8px;    /* Default — buttons, inputs */
  --r-lg:              16px;   /* Cards */
  --r-pill:            999px;

  /* ---------- Spacing scale (8px base) ---------- */
  --s-1:               4px;
  --s-2:               8px;
  --s-3:               12px;
  --s-4:               16px;
  --s-5:               24px;
  --s-6:               32px;
  --s-7:               48px;
  --s-8:               64px;
  --s-9:               96px;
  --s-section-pc:      140px;  /* Section vertical padding (PC) */
  --s-section-sp:      80px;   /* Section vertical padding (smartphone) */

  /* ---------- Shadows (restrained, professional) ---------- */
  --shadow-card:       0 1px 2px rgba(10,37,64,0.04), 0 4px 16px rgba(10,37,64,0.06);
  --shadow-card-hover: 0 2px 4px rgba(10,37,64,0.06), 0 8px 28px rgba(10,37,64,0.10);
  --shadow-float:      0 8px 24px rgba(10,37,64,0.18);
  --shadow-header:     0 1px 0 rgba(10,37,64,0.06);

  /* ---------- Type families ---------- */
  --font-serif:        "Shippori Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
  --font-sans:         "Noto Sans JP", "Hiragino Kaku Gothic ProN", "YuGothic", "Meiryo", sans-serif;

  /* ---------- Type scale (PC) ---------- */
  /* Headings: Noto Serif JP Bold/700. The single brand tagline uses Bold/900. */
  --t-display:         clamp(40px, 6vw, 88px);    /* Hero tagline only */
  --t-h1:              clamp(32px, 4vw, 52px);    /* Page title */
  --t-h2:              clamp(26px, 2.6vw, 38px);  /* Section heading */
  --t-h3:              clamp(20px, 1.6vw, 24px);  /* Sub heading */
  --t-h4:              18px;
  --t-body-lg:         18px;
  --t-body:            16px;
  --t-small:           14px;
  --t-caption:         12px;
  --t-eyebrow:         13px;

  /* Line heights */
  --lh-tight:          1.2;
  --lh-snug:           1.4;
  --lh-body:           1.8;     /* Body — 日本語の本文は1.8前後 */
  --lh-loose:          2.0;

  /* Letter spacing — Japanese needs slight tracking */
  --ls-display:        0.04em;
  --ls-heading:        0.02em;
  --ls-body:           0.04em;  /* 日本語本文 */
  --ls-eyebrow:        0.2em;   /* For latin eyebrow labels */
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg1);
  background: var(--bg-app);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";   /* Proportional kana spacing */
}

/* Headings — Noto Serif JP, weight 700; the brand tagline uses 900 */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--fg1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

.display {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--t-display);
  letter-spacing: var(--ls-display);
  line-height: 1.15;
}

h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
h4, .h4 { font-size: var(--t-h4); }

/* Body */
p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg2);
  margin: 0 0 1em;
}

.body-lg   { font-size: var(--t-body-lg); line-height: 1.9; }
.small     { font-size: var(--t-small); }
.caption   { font-size: var(--t-caption); color: var(--fg3); letter-spacing: var(--ls-body); }

/* Latin eyebrow / labels (e.g. "SERVICES", "ABOUT") */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  color: var(--peace-blue);
  text-transform: uppercase;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  transition: color 160ms ease;
}
a:hover { color: var(--link-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tap targets — mobile minimum 48px */
button, .btn, a.btn, input[type=button], input[type=submit] {
  min-height: 48px;
}