/* ==========================================================================
   tokens.css — 色・書体・余白の定義（要件定義書 §5.2）

   ここに書いていない色・サイズを、ほかのCSSに直接書かない。
   直接 #hex や px を書き始めると、あとから一括で変えられなくなる。

   数値はすべて静的プレビュー13枚を実機で計測して確定した値。
   ========================================================================== */

:root{
  /* --- 紙・墨 ---------------------------------------------------------
     純白・純黒は使わない。すべて紺に寄せて色味を付ける（hallmark gate 7）。
     真っ白／真っ黒の画面は、無料テーマの既定値そのものに見えるため。 */
  --c-paper:      #f7f9fb;  /* ベース背景 */
  --c-paper-2:    #eaf0f5;  /* セクション交互背景 */
  --c-paper-3:    #dde7ef;  /* 罫線・薄い面 */
  --c-surface:    #fdfefe;  /* カード・図版の面（紙よりわずかに明るい） */
  --c-ink:        #0e1a24;  /* 本文・見出し */
  --c-ink-2:      #33475a;  /* 副次テキスト */
  --c-ink-3:      #4e6272;  /* キャプション・メタ情報 */

  /* --- ブランドネイビー ------------------------------------------------ */
  --c-navy:       #0f5289;  /* ブランドカラー */
  --c-navy-900:   #082c4b;  /* 濃紺面（フッター・CTA帯） */
  --c-navy-850:   #0d3557;  /* 濃紺面のうえで、さらに一段沈ませる面 */
  --c-navy-700:   #0b4372;
  --c-navy-600:   #1c6aa8;
  --c-navy-100:   #dfeaf3;  /* 淡い面 */

  /* --- 金・真鍮 --------------------------------------------------------
     総面積は1画面の5%以内に収める。
     brass-bright は紺の上でだけ使う。紙の上に置くとコントラスト2.13で不足する。 */
  --c-brass:        #8c6d1f;  /* 紙の上で使う金 */
  --c-brass-bright: #c9a961;  /* 紺の上でだけ使う金 */
  --c-accent-ink:   #f7f9fb;  /* 金の面に載せる文字色 */

  /* --- 紺の面に載せる文字（明度を3段に分ける） ------------------------
     紺地の上では影が使えないので、文字色の明度差だけで階層を作る。 */
  --c-on-navy-1: #dbe7f1;  /* 本文 */
  --c-on-navy-2: #c2d3e2;  /* 副次テキスト */
  --c-on-navy-3: #9fb8cd;  /* キャプション・注記 */

  /* --- ボタンの押下状態 ------------------------------------------------ */
  --c-brass-h:        #7a5f1a;  /* 金ボタン hover */
  --c-brass-a:        #6b5316;  /* 金ボタン active */
  --c-brass-bright-h: #d9bb75;  /* 紺地の金ボタン hover */


  /* --- アイコン（CSSから差す用） ------------------------------------
     リスト項目のアイコンは、HTMLに <svg> を置くとブロックとして
     編集できなくなるため、mask 画像としてCSS側から差している。 */
  --icon-check: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --icon-cross: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");

  /* --- フォーカス・エラー ---------------------------------------------- */
  --c-focus:      #0f5289;
  --c-focus-dark: #c9a961;
  --c-error:      #a3352a;
  --c-error-bg:   #fbeeec;

  /* --- 書体 ------------------------------------------------------------
     families は2つまで（hallmark gate 37）。3つ目は足さない。
     Noto 系を避けているのは、無料テーマでの使用率が突出して高く、
     それ自体がテンプレ感の発生源になるため。 */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-body:    "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* --- サイズ（下層ページの既定値） ------------------------------------
     読ませるページ向けの、やや小さめで行間の広い組み。
     トップだけは pages.css で一段大きい組みに差し替える。 */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.1875rem, .95rem + .8vw, 1.375rem);
  --text-2xl:  clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem);
  --text-3xl:  clamp(1.625rem, 1.15rem + 1.8vw, 2.125rem);
  --text-4xl:  clamp(1.875rem, 1.2rem + 2.9vw, 2.75rem);

  /* 日本語は欧文より行間を要する。hallmark gate 55 の趣旨（文字の衝突回避）は
     満たしたうえで、日本語組版に合わせて下限を上げてある。 */
  --lh-display: 1.42;
  --lh-body:    1.9;
  --lh-tight:   1.5;

  /* --- 余白 ------------------------------------------------------------
     padding:17px のようなスケール外の値は使わない（hallmark gate 24）。 */
  --space-3xs: 4px;   --space-2xs: 8px;   --space-xs:  12px;
  --space-sm:  16px;  --space-md:  24px;  --space-lg:  32px;
  --space-xl:  48px;  --space-2xl: 64px;  --space-3xl: 96px;
  --space-4xl: 128px;

  /* --- 角丸・罫線 ------------------------------------------------------
     12pxを超える角丸は使わない。丸いほどSaaSテンプレ的になる。 */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --rule:        1px solid var(--c-paper-3);
  --rule-strong: 1px solid var(--c-navy-100);
  --rule-accent: 2px solid var(--c-brass);

  /* --- 影・動き --------------------------------------------------------
     紺の面の上では影を使わず、明度差で浮かせる。 */
  --shadow-1: 0 1px 2px rgba(14,26,36,.06), 0 2px 8px rgba(14,26,36,.04);
  --shadow-2: 0 2px 4px rgba(14,26,36,.08), 0 8px 24px rgba(14,26,36,.06);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);

  /* --- レイアウト ------------------------------------------------------ */
  --w-content: 1120px;  /* 1カラムページの最大幅 */
  --w-prose:   720px;   /* 記事本文（全角38〜42文字＝日本語の適正） */
  --w-wide:    1280px;  /* 事例カード・ヘッダー・フッター */
  --gutter:    clamp(16px, 4vw, 40px);
  --header-h:  80px;
  --field-h:   52px;    /* 入力欄とボタンの高さを揃えるための値 */

  /* --- 重なり順 --------------------------------------------------------
     z-index:9999 のような値は使わない。名前の付いた段だけを使う。 */
  --z-base:       1;
  --z-raised:     10;
  --z-sticky:     200;
  --z-sticky-nav: 300;
  --z-drawer:     400;
}