/* ==========================================================================
   tokens.css — 志縁グループ デザイントークン
   Source: 志縁GP Design System (colors_and_type.css)
   ========================================================================== */

/* === @import はファイル先頭に置く（CSS仕様要件） === */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&display=swap");

/* === スムーススクロール === */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* === 改行禁止ユーティリティ：ブランド名・固有名詞用 === */
.nobr { white-space: nowrap; }

:root {
  /* === ブランドパレット（ロゴから抽出） === */

  --color-teal-100: #E8EED2;
  --color-teal-300: #C6D37E;
  --color-teal-500: #8BAB4A;   /* セージグリーン：ブランドプライマリ */
  --color-teal-700: #6A8936;
  --color-teal-900: #3F5320;

  --color-brown-700: #5B4632;
  --color-brown-500: #856B50;

  /* サービス別カラー */
  --svc-home:    #9EC16F;  /* グループホーム — 黄緑 */
  --svc-koudou:  #7FC7B8;  /* 行動援護 — ミント */
  --svc-nursing: #E8878F;  /* 訪問看護 — サーモンピンク */
  --svc-life:    #F2C35A;  /* 生活介護 — ゴールドイエロー */
  --svc-medical: #6CA8D6;  /* 病院・医療 — スカイブルー */
  --svc-pharma:  #B89FCC;  /* 薬局 — ラベンダー */

  /* ペーパー（クリーム系） */
  --color-paper-0:   #FFFFFF;
  --color-paper-50:  #FDFBF5;
  --color-paper-100: #F8F4EA;
  --color-paper-200: #EFE8D6;
  --color-paper-300: #E5DCC5;

  /* インク（ウォームブラウン系） */
  --color-ink-900:   #3A2F23;
  --color-ink-700:   #5B4632;
  --color-ink-500:   #5A6463;
  --color-ink-300:   #93999A;
  --color-ink-100:   #C6C9CB;

  /* ボーダー */
  --color-border-soft: #DCD4BF;
  --color-border-mid:  #BFB6A0;

  /* ユーティリティ */
  --color-ok:     #3BA893;
  --color-closed: #B5ADA1;
  --color-warn:   #E0A350;
  --color-error:  #B34A3A;
  --color-sprout-500: #E0A350;

  /* === セマンティックエイリアス（Direction A: Cream/Teal） === */
  --bg-page:      var(--color-paper-100);
  --bg-raised:    var(--color-paper-200);
  --bg-sky:       #EAF1EF;

  --fg-1:         var(--color-ink-900);
  --fg-2:         var(--color-ink-500);
  --fg-3:         var(--color-ink-300);
  --fg-inverse:   var(--color-paper-100);

  --accent-primary:      var(--color-teal-500);
  --accent-primary-fg:   #FFFFFF;
  --accent-secondary:    var(--color-ink-900);
  --accent-secondary-fg: #FFFFFF;

  --border:        var(--color-border-soft);
  --border-strong: var(--color-border-mid);

  --headline-color: var(--color-brown-700);
  --logo-green: #8BAB4A;

  /* styles.css 内で参照されるエイリアス */
  --color-leaf-700:  var(--color-teal-700);
  --color-earth-700: var(--color-brown-700);

  /* === タイポグラフィ === */
  --font-ja:       "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-ja-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-en:       "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body:     var(--font-ja);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  --leading-tight:   1.3;
  --leading-snug:    1.5;
  --leading-normal:  1.8;
  --leading-relaxed: 2.0;

  --tracking-ja:       0.04em;
  --tracking-ja-tight: 0em;
  --tracking-en:       0.08em;
  --tracking-en-wide:  0.18em;

  /* === スペーシング === */
  --space-0:  0px;  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;
  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;

  /* === ラジウス === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-blob: 40% 60% 55% 45% / 50% 45% 55% 50%;
  --radius-pill: 999px;

  /* === シャドウ === */
  --shadow-none:  none;
  --shadow-faint: 0 1px 2px rgba(31,43,42,0.04);

  /* === モーション === */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    480ms;

  /* === レイアウト === */
  --content-max: 1200px;
  --content-pad: clamp(16px, 5vw, 40px);

  --z-header:  50;
  --z-overlay: 90;
  --z-modal:   100;
}

/* ==========================================================================
   Direction B — White/Green（data-theme="b" で切り替え）
   ========================================================================== */
[data-theme="b"] {
  --bg-page:      #FFFFFF;
  --bg-raised:    #F4F8F2;
  --bg-sky:       #EFF5EC;

  --color-paper-100: #FFFFFF;
  --color-paper-200: #F4F8F2;

  --color-teal-500: #6DB869;
  --color-teal-700: #4E9A4A;
  --color-teal-300: #B6D9B0;
  --color-teal-100: #E5F1E1;

  --headline-color: var(--color-ink-900);
  --accent-primary:    #6DB869;
  --accent-secondary:  #1F2B2A;

  --font-body:   var(--font-ja-round);

  --border:        #E5E9E3;
  --border-strong: #B6D9B0;
}

/* ==========================================================================
   Base styles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color: var(--fg-1);
  background: var(--bg-page);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-ja);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { background: var(--bg-page); color: var(--fg-1); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover { opacity: 0.75; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* === 見出し === */
h1 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(26px, 3.5vw, var(--text-3xl));
  line-height: var(--leading-tight);
  color: var(--headline-color);
}
h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(22px, 2.6vw, var(--text-2xl));
  line-height: var(--leading-snug);
  color: var(--headline-color);
}
h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* === 装飾英語サブヘッド === */
.h-en-sub {
  font-family: var(--font-en);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-en-wide);
  text-transform: uppercase;
  color: var(--color-teal-700);
}

/* === セクションタイトル（葉アイコン + 日本語 + 英語） === */
.section-title { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.section-title__icon { height: 22px; width: auto; color: var(--color-sprout-500); }
.section-title__ja {
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--headline-color);
}
.section-title__en {
  font-family: var(--font-en); font-size: var(--text-sm);
  letter-spacing: var(--tracking-en-wide); text-transform: uppercase; color: var(--color-teal-700);
}

/* === ボタン === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--text-base); letter-spacing: var(--tracking-ja);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border: 1px solid transparent; cursor: pointer; user-select: none;
}
.btn-primary   { background: var(--pg-accent, var(--accent-primary)); color: var(--accent-primary-fg); }
.btn-secondary { background: var(--accent-secondary); color: var(--accent-secondary-fg); }
.btn-ghost     { background: transparent; color: var(--fg-1); border-color: var(--color-border-mid); }
.btn:hover        { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,43,42,0.18); opacity: 1; }
.btn:active       { transform: translateY(0);    box-shadow: 0 2px 6px rgba(31,43,42,0.10); transition-duration: 60ms; }
.btn-primary:hover  { background: var(--pg-accent-dark, var(--color-teal-700)); }
.btn-secondary:hover{ background: var(--color-ink-700); }
.btn-ghost:hover    { background: var(--fg-1); color: #fff; border-color: var(--fg-1); }
.btn--sm       { padding: 10px 18px; font-size: var(--text-sm); }
.btn--lg       { padding: 16px 36px; font-size: var(--text-md); }

/* === ユーティリティ === */
.u-inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--content-pad); }
.link-underline { display: inline-block; position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }
.num { font-family: var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-en); }