/* =============================================================
   variables.css — デザイントークン（サイト全体の設計値はここだけで管理）
   テーマ v2：白基調モダン × 夜空のヒーロー（スタジオ型・2026-07-06）
   - 本文エリア：白（余白と大きな文字で見せる）
   - ヒーロー：深い夜空（星・月・花火・ドット絵が生きる背景）
   ============================================================= */

:root {
  /* ---- 色：ベース（白） ---- */
  --color-bg: #fafaf7;            /* ページ背景（わずかに温かい白） */
  --color-surface: #ffffff;       /* カードの面 */
  --color-line: #e7e7e2;          /* 罫線 */

  /* ---- 色：文字 ---- */
  --color-ink: #16161a;           /* 本文（ほぼ黒） */
  --color-ink-soft: #5c5c66;      /* 補足・説明文（白背景で約6.3:1のコントラストを確保） */

  /* ---- 色：夜空（ヒーロー） ---- */
  --color-night: #0b1026;         /* 夜空の紺 */
  --color-night-deep: #060818;    /* 夜空の底 */
  --color-on-night: #f4f3ec;      /* 夜空の上の文字 */

  /* ---- 色：アクセント ---- */
  --color-accent: #3646f5;        /* エレクトリックブルー（リンク・ボタン） */
  --color-spark: #f5b94a;         /* 花火の金 */
  --color-spark-2: #7ea8ff;       /* 花火の青白 */

  /* ---- 色：状態 ---- */
  --color-placeholder: #eeeee9;   /* 画像未設定時の箱 */

  /* ---- フォント ---- */
  --font-display: "Syne", "Zen Kaku Gothic New", sans-serif;        /* 英字見出し・ロゴ・数字 */
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;  /* 本文・日本語見出し */

  /* ---- 文字サイズ（モバイル基準・PCは clamp で伸びる） ---- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 4.5vw, 2.75rem);      /* セクション見出し */
  --fs-hero: clamp(2.1rem, 6.5vw, 4.25rem);     /* ヒーローの大文字 */
  --fs-num: clamp(3.5rem, 9vw, 6.5rem);         /* セクション番号 01〜04 */

  /* ---- 余白 ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-section: clamp(5rem, 12vw, 9rem);     /* セクション間の大きな余白 */

  /* ---- レイアウト ---- */
  --width-content: 1160px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --shadow-card: 0 4px 20px rgba(22, 22, 26, 0.07);
  --shadow-card-hover: 0 14px 40px rgba(22, 22, 26, 0.13);
}

/* ブレークポイントはCSS変数にできないため、値をここに明記して統一する。
   モバイル：〜767px ／ PC：768px〜（1ページ完結型のためカラム切替は主にWORKSカード内） */