/* =============================================================
   Bull Tail Works — Design Tokens
   ライティングポートフォリオLP / Design System v1.0
   -------------------------------------------------------------
   このファイルが唯一の真実 (single source of truth)。
   Claude Code 実装時は、ここで定義した CSS 変数を必ず参照すること。
   ハードコードした色・サイズの直書きは禁止。
   ============================================================= */

:root {
  /* ---------- Color : Brand ---------- */
  --color-navy:        #1f2d4e;  /* メインカラー : 見出し / プライマリボタン / ヘッダーロゴ */
  --color-navy-deep:   #16223c;  /* 最も濃い面 : CTAバンド / フッター */
  --color-navy-soft:   #2c3c61;  /* ホバー / 補助 */

  --color-gold:        #b18a4f;  /* アクセント : 数字強調 / ゴールドCTA / 罫線アクセント */
  --color-gold-soft:   #c8b189;  /* ゴールドの淡色 : ホバー面 / 装飾線 */

  /* ---------- Color : Neutral ---------- */
  --color-bg:          #ffffff;  /* ベース背景 */
  --color-surface:     #f5f3ef;  /* セクション交互背景 (温かみのあるライトグレー) */
  --color-surface-2:   #faf9f6;  /* カード内のうっすら面 */
  --color-chip:        #efeae0;  /* ジャンルタグ背景 (ベージュ) */

  --color-ink:         #23262d;  /* 本文テキスト */
  --color-ink-soft:    #4a4e57;  /* 本文セカンダリ */
  --color-muted:       #757982;  /* 補足 / キャプション */
  --color-border:      #e4e1db;  /* 罫線 / カード枠 */
  --color-border-soft: #eeece7;  /* さらに薄い罫線 */

  --color-on-navy:        #ffffff;          /* ネイビー面上のテキスト */
  --color-on-navy-muted:  rgba(255,255,255,.72);

  /* ---------- Typography : Family ---------- */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  /* 見出し(信頼感) = serif / 本文・UI(可読性) = sans */

  /* ---------- Typography : Scale ---------- */
  --fs-display: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);   /* ヒーロー大見出し  ~52px */
  --fs-h1:      clamp(1.75rem, 1.2rem + 2vw, 2.5rem);   /* ページ見出し     ~40px */
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.4vw, 2rem);    /* セクション見出し  ~32px */
  --fs-h3:      1.25rem;   /* カード見出し ~20px */
  --fs-lead:    1.0625rem; /* リード文 ~17px */
  --fs-body:    1rem;      /* 本文 16px */
  --fs-sm:      0.875rem;  /* 補足 14px */
  --fs-xs:      0.75rem;   /* キャプション 12px */
  --fs-eyebrow: 0.75rem;   /* 英字ラベル (STRENGTH等) */

  /* ---------- Typography : Weight & Leading ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight:   1.4;   /* 大見出し */
  --lh-heading: 1.55;  /* 小見出し */
  --lh-body:    1.9;   /* 本文(日本語は広めに) */

  --ls-tight:   -0.01em;
  --ls-eyebrow: 0.22em; /* 英字ラベルのトラッキング */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-pad-y: clamp(56px, 4vw + 32px, 96px); /* セクション上下余白 */

  /* ---------- Layout ---------- */
  --container:      1200px;  /* コンテンツ最大幅 */
  --container-wide: 1280px;
  --gutter:         24px;    /* 左右の最小余白 */

  /* ---------- Radius (BtoB : 控えめ) ---------- */
  --radius-sm:   4px;   /* カード */
  --radius-md:   8px;   /* ボタン / 大きめカード */
  --radius-pill: 999px; /* ナビCTA / ゴールドCTA */

  /* ---------- Shadow (清潔感 : ごく淡く) ---------- */
  --shadow-xs:   0 1px 2px rgba(22,34,60,.05);
  --shadow-card: 0 1px 3px rgba(22,34,60,.05), 0 10px 28px rgba(22,34,60,.05);
  --shadow-lift: 0 4px 10px rgba(22,34,60,.08), 0 18px 40px rgba(22,34,60,.08);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --dur-fast:   .15s;
  --dur:        .28s;
}