/* ==========================================================================
   Cear pavé — デザイントークン
   色・文字・角丸・影・動きの値は、このファイルだけで調整できます。
   他のCSSはここで定義した変数（var(--…)）だけを参照します。

   カラートーン（2026-09-27 確定）
   ・地・面・線・文字 …… 色みのないグレー（写真の色をそのまま見せるため、写真のまわりに色を置かない）
   ・差し色 ……………… 澄んだ青（A案）。強調・線・点・グラデーションはすべてこの系統
   ========================================================================== */
:root {
  /* ---- 地と面（無彩色） ---- */
  --paper: #fafafa;          /* ページの地 */
  --surface: #f4f4f4;        /* 一段落ちる面（交互のセクション） */
  --surface-2: #ececec;      /* さらに落ちる面・サムネイルの下地 */
  --studio: #f0f0f0;         /* 製品レンダーの背景と同じ色（キービジュアル・複数台の写真） */
  --soft: var(--surface);    /* 旧名（styles.css との互換） */
  --line: #e0e0e0;           /* 区切り線 */
  --line-strong: #c9c9c9;    /* 強めの線・枠 */
  --hairline: rgba(20, 22, 26, .07);

  /* ---- 文字（無彩色の墨） ---- */
  --ink: #1d1f22;            /* 見出し・本文 */
  --ink-soft: #3d4046;       /* 二番手の文字 */
  --muted: #6b6e74;          /* 補足文 */
  --faint: #9b9ea3;          /* 注記・ラベル */
  --on-ink: #fafafa;         /* 墨色の上の文字 */

  /* ---- 差し色（澄んだ青） ---- */
  --accent: #3a86d6;         /* 線・塗り・アイコン */
  --accent-strong: #1e64b4;  /* 文字リンク・小さな文字（白地でコントラスト5.7:1） */
  --accent-deep: #174f8f;    /* 濃い差し色 */
  --accent-light: #6fb3ea;   /* グラデーションの明るい端 */
  --accent-soft: #9cc6ee;    /* 淡い線・枠 */
  --accent-mist: #eaf3fc;    /* ごく淡い面 */
  --focus: #3a86d6;          /* フォーカス枠 */

  /* ---- グラデーション ---- */
  --grad-accent: linear-gradient(100deg, #1e64b4 0%, #2f7ccd 55%, #4a94dc 100%);   /* 見出しの強調（明るい端でも地とのコントラスト3:1以上） */
  --grad-progress: linear-gradient(90deg, #9cc6ee, #3a86d6);                        /* 読み進み線・題の線 */

  /* ---- 製品色（色見本の点） ---- */
  --pave-white: #eeeeec;
  --pave-black: #26272a;

  /* ---- 文字組 ---- */
  --font: "Lexend", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --display-weight: 700;
  --display-tracking: -.025em;
  /* 本文の組み方（2026-09-27：詰めて細く）。かなの間は palt で詰め、行間と字間を控えめに */
  --leading: 1.75;           /* 本文の行間 */
  --leading-note: 1.65;      /* 注記・短い説明の行間 */
  --tracking: .02em;         /* 本文の字間 */
  --weight-body: 400;        /* 本文の太さ */

  /* ---- 角丸 ---- */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-xl: 36px;

  /* ---- 影（柔らかい無彩色） ---- */
  --shadow-chip: 0 6px 18px -10px rgba(20, 24, 30, .28);
  --shadow-soft: 0 28px 60px -40px rgba(20, 24, 30, .32);
  --shadow-float: 0 48px 90px -52px rgba(20, 24, 30, .42);

  /* ---- ガラス（半透明の面） ---- */
  --header-glass: rgba(250, 250, 250, .78);
  --ink-glass: rgba(29, 31, 34, .78);

  /* ---- 動き ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* 基本：素早く出て、ゆっくり止まる */
  --ease-soft: cubic-bezier(.22, .8, .26, 1);   /* 透明度・色 */
  --ease-camera: cubic-bezier(.62, 0, .22, 1);  /* カメラの横移動 */
  --ease-float: cubic-bezier(.37, 0, .63, 1);   /* 浮き沈み（正弦に近い往復） */
  --dur-reveal: 1.2s;
  --stagger: 90ms;
}