/* ==========================================================================
   Idea Craft デザイントークン  tokens.css
   --------------------------------------------------------------------------
   出典 : Figma「👀 Cover」（テキストサンプル / ルール）を Figma MCP で読み取り
   基準 : 1rem = 16px（ブラウザ既定）。フォントは Noto Sans JP
   方針 : Figma上はpx指定だが、CSSでは rem（拡大・アクセシビリティ対応）で定義。
          行間は unitless（継承に強い）。数値直書きせず、各CSSは var() で参照する。
   ========================================================================== */
:root {

  /* --- フォントファミリー -------------------------------------------------- */
  /* Figmaコンポーネントシート実測（2026-08-02）: 本文・見出しは Zen Kaku Gothic New。
     Noto Sans JP はフッター最下部（Figmaスタイル「IC Heading H6」）のみで使用。 */
  --font-family-base: "Zen Kaku Gothic New", sans-serif;
  --font-family-sub:  "Noto Sans JP", sans-serif;

  /* --- フォントウェイト ---------------------------------------------------- */
  /* ※ 使うウェイトは inc/enqueue.php の Google Fonts 読み込みと一致させること。
     日本語フォントはウェイトごとに重い → 使わないものは宣言も読み込みもしない。 */
  --font-weight-regular:   400; /* 本文 */
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700; /* 見出し */
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* --- タイプスケール（font-size）----------------------------------------- */
  /* コメントの px は Figma の元値。スケールに無いサイズは勝手に作らずFigma/トークンを見直す */
  --font-size-xs:      0.725rem;  /* 11.6px   タグ・キャプション等 */
  --font-size-h6:      0.8rem;    /* 12.8px   */
  --font-size-h5:      0.889rem;  /* 14.222px */
  --font-size-body:    1rem;      /* 16px     本文 */
  --font-size-h4:      1rem;      /* 16px     */
  --font-size-h3:      1.143rem;  /* 18.286px */
  --font-size-h3-lg:   1.333rem;  /* 21.33px  H3大 */
  --font-size-h2-lead: 1.6rem;    /* 25.6px   セクション小見出し/リード */
  --font-size-h2:      2rem;      /* 32px     */
  --font-size-h1:      2.667rem;  /* 42.667px */
  --font-size-large:   4rem;      /* 64px     ヒーロー等の大見出し */
  --font-size-xl:      8rem;      /* 128px    ディスプレイ表示 */

  /* --- 行間（line-height・unitless）-------------------------------------- */
  --line-height-none:    1;     /* 行ボックス＝フォントサイズ（Figma: TOP p-news 見出し 64px/64.005px） */
  --line-height-display: 1.15;  /* 64px級の英大見出し（Figma実測） */
  --line-height-tight:   1.2;   /* 大見出し・詰め */
  --line-height-snug:    1.3;
  --line-height-normal:  1.4;   /* p-page-header別ver タイトル（Figma実測） */
  --line-height-heading: 1.5;   /* 見出し */
  --line-height-body:    1.6;   /* 本文の標準（Figma実使用）*/
  --line-height-loose:   1.8;   /* 長文・読み物用（Coverのbody仕様）*/

  /* --- 余白スケール（4pxベースグリッド・8px推奨 / 値ベース命名）----------- */
  /* ルール：余白は生のpxを使わず必ず var(--space-*)。基本は8の倍数、最小単位は4px。 */
  --space-2:   0.125rem; /*  2px  ⚠ off-grid。タグ内テキスト間等（Figma実測） */
  --space-4:   0.25rem;  /*  4px  4pxグリッドの最小単位 */
  --space-6:   0.375rem; /*  6px  ⚠ off-grid。FAQ Q行のpadding等（Figma実測） */
  --space-8:   0.5rem;   /*  8px  */
  --space-10:  0.625rem; /* 10px  ⚠ off-grid（4の倍数でない）。暫定。可能なら8/12へ正規化 */
  --space-12:  0.75rem;  /* 12px  */
  --space-16:  1rem;     /* 16px  */
  --space-24:  1.5rem;   /* 24px  */
  --space-32:  2rem;     /* 32px  */
  --space-40:  2.5rem;   /* 40px  */
  --space-48:  3rem;     /* 48px  */
  --space-56:  3.5rem;   /* 56px  */
  --space-64:  4rem;     /* 64px  */
  --space-72:  4.5rem;   /* 72px  2カラムセクションの内側gap（Figma実測） */
  --space-80:  5rem;     /* 80px  */
  --space-96:  6rem;     /* 96px  */
  --space-104: 6.5rem;   /* 104px カフェ p-feature の下余白（Figma実測 3191:24179） */
  --space-120: 7.5rem;   /* 120px */
  --space-128: 8rem;     /* 128px */
  --space-160: 10rem;    /* 160px セクション下余白 大（Figma実測） */

  /* --- 色 ----------------------------------------------------------------- */
  /* ブランドカラー（Figma変数より実HEX確定・2026-08-02）
     primary   = genki-port/genki-port#3e3a39（全テキスト・罫線・ダーク背景）
     secondary = #CA9E6F（タグ背景 = 白の上に20%で使用）
     tertiary  = #A89990（セクション背景 = 白の上に10%で使用） */
  --color-primary:   #3e3a39;
  --color-secondary: #ca9e6f;
  --color-tertiary:  #a89990;
  --color-navy:      #003163;  /* 元気ポートロゴ・見出し用 */
  --color-kids:      #418993;  /* 元気キッズ ブランド色（施設名見出し・Figma実測 TOP 3191:23915） */
  --color-green:     #688780;  /* Figma変数 genki-port/genki-port#688780（アクセント） */

  /* 派生背景（Figmaは白の上に不透明度重ね。実装は color-mix で1トークン化） */
  --color-bg-beige: color-mix(in srgb, var(--color-tertiary) 10%, var(--color-white)); /* genkiイノベーションセンター様背景 */
  --color-bg-tag:   color-mix(in srgb, var(--color-secondary) 20%, var(--color-white)); /* genki-port#ca9e6f_20% */
  /* 塗りボタン（濃色地）のhover面。⚠ inferred: FigmaにHover定義が無いため実装側で決めた値。 */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 78%, var(--color-white));
  --color-overlay-dark:     rgb(0 0 0 / 0.25);       /* FV写真の暗幕 */
  --color-bg-translucent:   rgb(255 255 255 / 0.9);  /* ヘッダーのサブメニュー背景 */

  /* ニュートラル */
  --color-white:      #ffffff;
  --color-black:      #1a1a1a;  /* 締まった黒（デフォルト）*/
  --color-gray-light: #f5f5f5;  /* 仮：背景・薄い区切り（要調整）*/
  --color-gray:       #cccccc;  /* 仮：罫線・ボーダー（要調整）*/
  --color-gray-dark:  #595959;  /* 仮：サブテキスト（白背景でコントラストAA合格レベル / 要調整）*/

  --color-placeholder: #dedede; /* フォーム入力欄のプレースホルダ（Figma実測 お問い合わせ 3191:24547） */

  --color-gray-warm:  #5d5759;  /* Figma変数 text/color（= genki-kids.net/Scorpion）暖色寄りのグレー */

  /* 用途別（セマンティック）— 実体の色を参照する */
  --color-text: var(--color-primary);  /* 本文テキスト（Figma実測 #3E3A39） */
  --color-text-muted: var(--color-gray-warm);  /* 補助テキスト（Figma変数 text/color） */

  /* --- 字間（letter-spacing）---------------------------------------------- */
  --letter-spacing-wide:    0.02em;  /* Figma 2% */
  --letter-spacing-wider:   0.05em;
  --letter-spacing-display: 0.025em; /* Figma 1.6px @ 64px（大見出し用） */
  --letter-spacing-widest:  0.1em;   /* Figma 1.8286px @ 18.286px（アクアポニックスのベン図ラベル） */

  /* --- 角丸・線・影（Figmaコンポーネントシート実測で確定・2026-08-02）------ */
  --radius-xs:    0.125rem; /*  2px  */
  --radius-sm:    0.25rem;  /*  4px  ボタン・タグ */
  --radius:       0.5rem;   /*  8px  FAQのQ行 */
  --radius-lg:    1rem;     /* 16px  カード */
  --radius-xl:    1.5rem;   /* 24px  破線カード・p-content・スライダー画像 */
  --radius-full:  9999px;   /* 円・ピル形（Figmaの100pxピルはこれで表現） */
  --radius-input: 0.1875rem; /* 3px フォーム入力欄（Figma実測 お問い合わせ 3191:24537 等） */
  /* 線幅：非スケール要素のためpxで保持（比率縮小の例外） */
  --border-width-hairline: 0.75px; /* カード内の区切り線 */
  --border-width:          1px;    /* 既定（p-company表罫線等） */
  --border-width-medium:   1.5px;  /* 破線カード・縦罫線・白ボタン */
  --border-width-bold:     2px;    /* Button・矢印・p-cta罫線 */
  --border-color: var(--color-gray);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.08); /* コンポーネントシートに影は未出現（暫定のまま）*/
  /* フォーム入力欄の内側シャドウ（Figma実測 お問い合わせ）。枠線ではなく inset shadow で表現されている。
     ぼかしは非スケール要素のため px 保持。 */
  --shadow-input: inset 0 0 3px rgb(0 0 0 / 0.3);
  /* TOP FV 縦書きコピーの可読性確保（Figma実測 3191:23857 の drop-shadow）。
     filter: drop-shadow() で使う想定のため、ぼかしはpxのまま保持（非スケール要素）。 */
  --shadow-text-fv: 0 0 17.5px rgb(0 0 0 / 0.55);

  /* --- レイアウト定数 ------------------------------------------------------ */
  --container-width: 75rem;   /* 1200px コンテンツ最大幅（Figma実測: footer/p-company等） */
  --design-width:    1440;    /* PCデザイン基準幅（px・比率縮小レスポンシブの基準） */

  /* --- 重なり順（z-index）-------------------------------------------------- */
  /* 数値直書きを避けるため、重なりが必要な要素はここを参照する。 */
  --z-submenu:     10;   /* PCヘッダーのホバーサブメニュー */
  --z-header:      50;   /* スクロール追従するサイトヘッダー（本文より上・ドロワーより下） */
  --z-drawer:      90;   /* SPドロワー（オーバーレイ本体） */
  --z-nav-toggle: 100;   /* ハンバーガーボタン（ドロワーより上＝閉じるボタンを兼ねる） */

  /* --- モーション（duration / easing）-------------------------------------- */
  /* ⚠ inferred: Figmaにモーション定義が無いため実装側で決めた値。
     デザイン確定時はここだけ直せば全UIに反映される。
     時間は比率縮小の対象外（rem不可）のため秒で保持する。 */
  --duration-fast:  0.28s;  /* 色・不透明度など小さな変化 */
  --duration:       0.5s;   /* 標準（ドロワーの開閉） */
  --duration-slow:  0.72s;  /* 大きな面の移動 */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);   /* 出現（勢いよく入って静かに止まる） */
  --ease-in:        cubic-bezier(0.55, 0, 1, 0.45);   /* 退場 */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);   /* 往復する変形（ハンバーガー→×） */
  --stagger-step:   0.065s; /* ドロワー内メニュー項目を1つずつ遅らせる刻み */

  /* --- ホバー（インタラクション）------------------------------------------ */
  /* ⚠ inferred: Figmaにhover定義が無いため実装側で決めた値。
     方針は2種類だけに統一する。
       枠線ボタン（白地）→ 色を反転（枠線色を面に、文字を白に）
       塗りボタン（濃色地）→ 面を --color-primary-hover に薄める
     いずれも矢印は --hover-shift ぶん右へ進む。 */
  --hover-shift: var(--space-8); /* hover時に矢印が進む距離 */
  /* スクロールイン（fade up）。姉妹サイト genki-port と同じ体感に合わせた値。
     hover 用の軽い演出とは別軸のため、専用の duration / easing を持たせる。 */
  --inview-shift:    var(--space-32); /* 下から上へ動く距離（32px） */
  --inview-duration: 0.6s;            /* ゆっくり出す */
  --inview-ease:     ease;            /* 立ち上がりも穏やかに（--ease-out より緩い） */
  --inview-stagger:  0.15s;           /* 並んだ要素を順番に出す刻み */
  --inview-duration-long: 1.2s;       /* 罫線を引くなど、ゆっくり見せる動き */
  --inview-stagger-char: 0.06s;       /* 1文字ずつ出すときの刻み（レールの縦書きラベル） */
  --inview-stagger-pop:  0.08s;       /* ポップに次々出すときの刻み（施設マップの吹き出し） */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* 少し行き過ぎて戻る＝弾んで出る */
  --opacity-hover: 0.7;          /* 反転も減光もできない要素（画像リンク等）用 */

  /* --- アスペクト比（画像プレースホルダー）-------------------------------- */
  /* 使い方例： .thumb { aspect-ratio: var(--ratio-16-9); } */
  --ratio-golden: 1.618 / 1;    /* 黄金比 */
  --ratio-silver: 1.414 / 1;    /* 白銀比 */
  --ratio-square: 1 / 1;        /* 正方形 */
  --ratio-16-9:  16 / 9;
  --ratio-4-3:    4 / 3;
  --ratio-4-5:    4 / 5;
  --ratio-2-1:    2 / 1;
}

/* ==========================================================================
   使い方の参考（このファイルには書かず base.css 側で定義する想定）
   --------------------------------------------------------------------------
   body { font-family: var(--font-family-base);
          font-weight: var(--font-weight-regular);
          font-size: var(--font-size-body);
          line-height: var(--line-height-body);
          color: var(--color-text); }
   h1 { font-size: var(--font-size-h1);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bold); }
   h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); font-weight: var(--font-weight-bold); }
   ... H3〜H6 も同様。Large / XL は専用クラス（.text-large / .text-xl）で。
   ========================================================================== */