/* =====================================================================
   tokens.css — デザイントークン（CSS変数）
   ※ ブランド確定後にカラー / フォント / 写真トーンをここで差し替える
   SPEC §8（暫定）準拠
   ===================================================================== */

:root {
  /* ---- Color：芦屋ウィメンズ準拠（ダスティブルー × クールニュートラル / ミュート緑）---- */
  --color-bg:          #FBFAF8; /* ほぼ白・ごく淡い温かみ（清潔感） */
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F4F7F8; /* クールグレー（交互セクション・芦屋 #f5f7f8） */
  --color-ink:         #2A2A2C; /* 墨（芦屋 #232323 寄り） */
  --color-ink-soft:    #5F5F62; /* 補助テキスト（白上 約6:1, AA） */
  --color-ink-faint:   #8A8A8C; /* キャプション・フォーム枠（白上 約3:1） */
  --color-accent:      #4690AB; /* ダスティブルー＝主役（装飾・下線・枠） */
  --color-accent-ink:  #2F7088; /* 濃いブルー（CTA塗り：白文字で約5.5:1, AA適合） */
  --color-accent-deep: #235266; /* さらに濃いブルー（hover / グラデ暗端） */
  --color-accent-2:    #46AB93; /* ミュート緑＝いのち・補助 */
  --color-accent-2-ink:#2E7C68; /* 緑濃色（白文字/テキスト用, AA） */
  --color-line:        #E4E6E7; /* 罫線 */
  --color-line-strong: #D2D2D2; /* 濃い罫線（芦屋 #d2d2d2） */
  --color-on-accent:   #FFFFFF; /* アクセント上の文字 */
  --color-focus:       #B5705A; /* フォーカス：寒色UIから分離する暖色 */

  /* ---- Typography ---- */
  /* 芦屋準拠：英字=Marcellus / 和文見出し=Zen Old Mincho / 本文=Zen Kaku Gothic New */
  --font-serif: "Marcellus", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --fs-display: clamp(2rem, 1.4rem + 3vw, 3.5rem);   /* ヒーロー見出し */
  --fs-h1:      clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h2:      clamp(1.4rem, 1.15rem + 1.3vw, 2rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;          /* 16px */
  --fs-small:   0.875rem;      /* 14px */
  --fs-label:   0.75rem;       /* 12px：英語ラベル等 */

  --lh-tight:   1.4;
  --lh-body:    1.9;           /* 本文ゆったり（SPEC §8） */
  --lh-heading: 1.5;

  --tracking-label: 0.2em;     /* 英語ラベルの字間（Marcellus をゆったり見せる） */
  --tracking-wide:  0.04em;

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

  /* ---- Spacing（8pxベース）---- */
  --space-2:  0.25rem;
  --space-4:  0.5rem;
  --space-6:  0.75rem;
  --space-8:  1rem;
  --space-12: 1.5rem;
  --space-16: 2rem;
  --space-24: 3rem;
  --space-32: 4rem;
  --space-48: 6rem;
  --space-64: 8rem;

  /* セクションの縦リズム（モバイル→デスクトップで拡大） */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---- Layout ---- */
  --container:       1120px;  /* 標準コンテンツ幅 */
  --container-narrow: 720px;  /* 読み物（記事・本文）幅 */
  --container-wide:  1320px;  /* 全幅近いセクション */
  --gutter:          clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h:        64px;

  /* ---- Radius / Shadow ---- */
  --radius-sm: 6px;
  --radius:    10px;          /* SPEC §8：角丸10px程度 */
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 39, 36, 0.05);
  --shadow:    0 6px 20px rgba(42, 39, 36, 0.07);   /* 控えめ（SPEC §8） */
  --shadow-lg: 0 14px 40px rgba(42, 39, 36, 0.10);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    150ms;
  --dur:         260ms;
  --dur-slow:    500ms;

  /* ---- z-index ---- */
  --z-header:   100;
  --z-overlay:  200;
  --z-menu:     210;
}