/* ===========================================
   こそあつ Design System
   Colors, Type, Spacing, Radii, Shadows
   =========================================== */

/* ----- Google Fonts (fallback for Hiragino) -----
   原本は Hiragino Kaku Gothic ProN を使用。
   Web 上の近似として Zen Kaku Gothic New（日本語）と
   M PLUS Rounded 1c（丸みのある強調用）を採用。
   ユーザーに提供するフォントファイルがあれば差し替え推奨。
*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=M+PLUS+Rounded+1c:wght@500;700;800;900&display=swap');

:root {
  /* ===== Brand Colors ===== */
  --color-primary:       #f9a55a;  /* 暖オレンジ — ブランドの主役 */
  --color-primary-dark:  #ef8f3c;  /* hover / active */
  --color-primary-deep:  #c96a1a;  /* テキスト on 淡色 */
  --color-primary-50:    #fff0e6;  /* ピーチ淡 */
  --color-primary-100:   #fde8d5;  /* ピーチ中 */
  --color-primary-200:   #fad2a8;

  --color-accent:        #84c08a;  /* 優しい緑 — 安心・自然 */
  --color-accent-dark:   #68a86e;
  --color-accent-deep:   #2e7d32;  /* テキスト on 淡色 */
  --color-accent-50:     #f0fdf4;
  --color-accent-100:    #e8f5e9;

  /* ===== Neutrals ===== */
  --color-bg:            #fffdf9;  /* ベース：クリーム */
  --color-bg-white:      #ffffff;
  --color-bg-dark:       #3a3a3a;  /* フッター背景 */

  --color-fg1:           #3a3a3a;  /* 見出し・強調 */
  --color-fg2:           #4a4a4a;  /* 本文 */
  --color-fg3:           #5a5a5a;  /* 補助本文 */
  --color-fg4:           #717171;  /* キャプション */
  --color-fg5:           #6b6b6b;
  --color-fg-mute:       #888888;

  --color-border:        #fde8d5;  /* カードの枠線（淡） */

  /* ===== Gradients ===== */
  --grad-hero:     linear-gradient(135deg, #fff0e6 0%, #fde8d5 40%, #e8f5e9 100%); /* @kind color */
  --grad-warm:     linear-gradient(135deg, #fff0e6, #fffdf9); /* @kind color */
  --grad-contact:  linear-gradient(135deg, #fff0e6 0%, #e8f5e9 100%); /* @kind color */
  --grad-green:    linear-gradient(135deg, #e8f5e9, #f0fdf4); /* @kind color */
  --grad-avatar:   linear-gradient(135deg, #fde8d5, #f9a55a); /* @kind color */

  /* ===== Typography ===== */
  --font-sans:   'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-round:  'M PLUS Rounded 1c', 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;

  /* Sizes — モバイル優先、clamp で流動的に */
  --fs-display:   clamp(2.2rem, 6vw, 3.8rem);  /* @kind font */ /* Hero h1 */
  --fs-h2:        clamp(1.6rem, 4vw, 2.4rem);  /* @kind font */ /* Section title */
  --fs-h3:        1.1rem;                      /* @kind font */ /* Card title */
  --fs-lead:      clamp(1.1rem, 2.5vw, 1.35rem); /* @kind font */ /* About copy */
  --fs-body:      1rem;     /* @kind font */
  --fs-sm:        0.92rem;  /* @kind font */
  --fs-xs:        0.82rem;  /* @kind font */
  --fs-label:     0.8rem;  /* "About", "Activities" 等 @kind font */

  --lh-tight:     1.2;  /* @kind font */
  --lh-base:      1.8;  /* @kind font */
  --lh-relaxed:   1.9;  /* @kind font */

  --fw-reg:   400;  /* @kind font */
  --fw-med:   500;  /* @kind font */
  --fw-bold:  700;  /* @kind font */
  --fw-heavy: 800;  /* @kind font */
  --fw-black: 900;  /* @kind font */

  --letter-label: 0.15em;  /* uppercase ラベル @kind font */
  --letter-logo:  0.05em;  /* @kind font */

  /* ===== Spacing ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;    /* section padding-y */

  /* ===== Radii ===== */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;   /* ボタン・タグは基本ピル型 */

  /* ===== Shadows ===== */
  --sh-card:        0 2px 10px rgba(0,0,0,0.06);
  --sh-card-hover:  0 4px 20px rgba(0,0,0,0.08);
  --sh-float:       0 4px 30px rgba(0,0,0,0.08);
  --sh-btn:         0 4px 14px rgba(249,165,90,0.35);
  --sh-btn-hover:   0 8px 20px rgba(249,165,90,0.45);
  --sh-btn-green:       0 4px 14px rgba(132,192,138,0.35);
  --sh-btn-green-hover: 0 8px 20px rgba(132,192,138,0.45);

  /* ===== Motion ===== */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast:   0.2s; /* @kind other */
  --dur-med:    0.3s; /* @kind other */

  /* ===== Layout ===== */
  --container-max: 900px; /* @kind spacing */
  --nav-h:         60px;  /* @kind spacing */
}

/* ===========================================
   Semantic defaults (body / headings / text)
   =========================================== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-fg2);
  background: var(--color-bg);
  line-height: var(--lh-base);
  font-weight: var(--fw-reg);
}

h1 {
  font-family: var(--font-round);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  color: var(--color-primary);
  line-height: var(--lh-tight);
}

h2 {
  font-family: var(--font-round);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  color: var(--color-fg1);
  line-height: 1.35;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heavy);
  color: var(--color-fg1);
  line-height: 1.5;
}

p { color: var(--color-fg3); line-height: var(--lh-base); }

small { font-size: var(--fs-xs); color: var(--color-fg4); }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--color-primary); }

/* Section "eyebrow" label (About / For Who / Activities …) */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  text-align: center;
}

/* Divider bar — ブランドの定型モチーフ */
.divider-bar {
  width: 48px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 12px auto 32px;
}