/* =============================================================
   design-tokens.css
   Figma: tonight-list.com NEW キャンバス（node-id: 1005:4206）
   抽出日: 2026-05-22
   5フレーム: トップ・作品一覧・作品詳細・女優特集・女優詳細
   ============================================================= */

/* ─── フォント読み込み ─── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Tenor+Sans&display=swap');

/* ─── カラートークン ─── */
:root {
  /* 背景 */
  --color-bg:              #FFFFFF;          /* ページ基本背景 */
  --color-bg-warm:         #EDEAE3;          /* ヘッダー・フッター・商品情報エリア */
  --color-bg-footer-bar:   #E7E5E1;          /* フッター下部バー */
  --color-bg-actress-prof: #E7E5E1;          /* 女優プロフィールカード背景 */
  --color-white:           #FFFFFF;
  --color-off-white:       #FCFCFC;          /* ボタン文字・オフホワイト */
  --color-black:           #000000;

  /* テキスト */
  --color-text:            #333333;          /* 本文・商品タイトル */
  --color-text-sub:        #555555;          /* ラベル・補足 */
  --color-text-muted:      #666666;          /* ふりがな・キャプション */

  /* ボタン */
  --color-btn-sample-bg:   #000000;          /* サンプル動画を見る */
  --color-btn-sample-text: #FFFFFF;
  --color-btn-buy-bg:      #000000;          /* 購入はこちら */
  --color-btn-buy-text:    #FFFFFF;
  --color-btn-back-bg:     #000000;          /* トップに戻る・ランキング一覧を見る・もっと見る */
  --color-btn-back-text:   #FFFFFF;

  /* ランクバッジ（円形 Type-A / 矩形 Type-C 共通色） */
  --color-rank-1-bg:       #F8EA51;          /* 1位: 黄 */
  --color-rank-1-text:     #000000;          /* 黒文字 */
  --color-rank-2-bg:       #B5B9CA;          /* 2位: 青灰 */
  --color-rank-2-text:     #000000;          /* 黒文字 */
  --color-rank-3-bg:       #DD8560;          /* 3位: サーモン */
  --color-rank-3-text-circle: #000000;       /* 円形バッジ: 黒文字 */
  --color-rank-3-text-rect:   #FCFCFC;       /* 矩形バッジ: 白文字 */
  --color-rank-other-bg:   #000000;          /* 4位以上 */
  --color-rank-other-text: #FCFCFC;          /* 白文字 */

  /* その他 */
  --color-star:            #DCCD2A;          /* 星評価 */
  --color-border:          #DEDEDE;          /* 区切り線・装飾ライン */
  --color-indicator:       #888888;          /* カルーセルドット */
}

/* ─── タイポグラフィトークン ─── */
:root {
  /* フォントファミリ */
  --font-ui:  'Noto Sans JP', sans-serif;
  --font-btn: 'Tenor Sans', 'Noto Sans JP', sans-serif;  /* ボタンテキスト */

  /* フォントウェイト */
  --fw-regular: 400;
  --fw-medium:  500;

  /* サイズスケール */
  --text-header:         14px;   /* ヘッダー「今夜のリスト」 */
  --text-page-title:     24px;   /* ページタイトル（大）/ 女優名（詳細） */
  --text-section-sub:    18px;   /* セクション サブ見出し（2D動画 等）・サンプル画像 */
  --text-product-title:  20px;   /* 商品タイトル（詳細ページ・女優詳細カード） */
  --text-scroll-title:   16px;   /* 横スクロールカードタイトル */
  --text-grid-title:     14px;   /* グリッド/リストカードタイトル */
  --text-badge-circle:   14px;   /* 円形ランクバッジ（横スクロール用） */
  --text-badge-rect:     10px;   /* 矩形ランクバッジ（リスト用）・女優ふりがな（一覧） */
  --text-actress-name:   14px;   /* 女優名（一覧）・グリッドタイトル */
  --text-actress-name-d: 24px;   /* 女優名（詳細） */
  --text-actress-ruby-d: 12px;   /* 女優ふりがな（詳細）・プロフィールラベル/値・免責文 */
  --text-btn:            16px;   /* ボタンテキスト全種 */
  --text-star:           11px;   /* 星評価 */
  --text-copyright:      12px;   /* コピーライト */

  /* 行間 */
  --lh-header:         20px;    /* ヘッダータイトル */
  --lh-product-title:  28px;    /* 商品タイトル（詳細） */
  --lh-scroll-title:   24px;    /* 横スクロールカードタイトル */
  --lh-grid-title:     20px;    /* グリッド/リストタイトル */
  --lh-btn:            24px;    /* ボタン */
  --lh-disclaimer:     20px;    /* 免責文 */
}

/* ─── スペーシング・コンポーネントトークン ─── */
:root {
  /* 画面 */
  --screen-w:    375px;   /* Figmaフレーム幅 */
  --screen-max:  480px;   /* PC表示時の最大幅 */
  --content-pad: 20px;    /* 左右パディング */
  --content-w:   335px;   /* 375 − 20×2 */

  /* ヘッダー */
  --header-h: 60px;

  /* フッター */
  --footer-h:       219px;
  --footer-bar-h:    45px;   /* 下部バー高さ */
  --footer-bar-top: 174px;   /* 下部バーの top 位置 */

  /* ────── カードタイプA: 横スクロール大型カード ────── */
  /* トップページ ランキング / おすすめ etc. */
  --scroll-card-w:          220px;   /* カード幅 */
  --scroll-card-img-h:      315px;   /* 118:169 → 220px幅換算 */
  --scroll-card-gap:         20px;   /* カード間ギャップ */
  --scroll-badge-size:       50px;   /* 円形バッジ直径（= border-radius: 25px） */

  /* ────── カードタイプB: 2列グリッドカード ────── */
  /* トップ セール/素人/おすすめ / 作品詳細「同じ女優の作品」 */
  /* カード幅は grid 1fr で自動計算: (375 - 20×2 - 12) / 2 = 161.5px */
  --grid-row-gap:    15px;   /* 行間ギャップ */
  --grid-col-gap:    12px;   /* 列間ギャップ */
  /* aspect-ratio: 590/800 (パッケージ縦長実測値) */

  /* ────── カードタイプC: 水平リスト型 ────── */
  /* 作品一覧ページ */
  --list-thumb-w:   150px;
  --list-thumb-h:   215px;   /* 118:169 → 150px幅換算 */
  --list-item-gap:   19px;   /* サムネ〜テキスト間 */
  --list-row-gap:    25px;   /* アイテム間縦 */
  --list-pad-y:      40px;   /* コンテンツ上下パディング */
  --list-title-w:   198px;   /* テキストエリア幅 */
  --list-divider-w: 100px;   /* アイテム間区切り線幅（中央揃え） */
  /* バッジ: 35px × 20px 矩形（別途 rank-badge.css） */

  /* ────── カードタイプD: 1列大判カード ────── */
  /* 女優詳細 人気作品TOP10 / 最新作品TOP10 */
  --hero-img-h:     252px;   /* フル幅ヒーロー画像高さ */
  --hero-info-h:    295px;   /* 情報エリア高さ */

  /* ────── セクション構造スペーシング ────── */
  --space-heading-border:     20px;  /* セクション見出しテキスト → デコレーションライン */
  --space-border-subheading:  20px;  /* デコレーションライン → サブ見出し / カルーセルドット → サブ見出し */
  --space-subheading-content: 25px;  /* サブ見出し → コンテンツ（グリッド/スクロール） */
  --space-cta-bottom:         10px;  /* CTAボタン下余白（次のdividerまで） */
  --space-hero-dots:          20px;  /* ヒーローバナー画像 → ドット / ドット → 次セクション */

  /* ────── ヒーローバナー ────── */
  --hero-banner-h: 500px;            /* ヒーローバナー固定高さ */

  /* ────── 作品詳細 CTAスペーシング ────── */
  --space-cta-top-gap:           5px;   /* 上部CTA: 直前要素 → サンプル動画ボタン */
  --space-cta-between:          10px;   /* ボタン間追加スペース */
  --space-cta-bottom-gap-top:   10px;   /* 上部CTA: 購入ボタン → テーブル / 下部CTA: サンプル → ボタン */
  --space-cta-bottom-gap-bottom:30px;   /* 下部CTA: 購入ボタン → 女優セクション */
  --space-sample-gap:           20px;   /* サンプル画像間 */

  /* ────── ボタン（全種共通） ────── */
  --btn-w:       250px;
  --btn-radius:   30px;
  --btn-pad-y:    13px;
  --btn-pad-x:    30px;

  /* ────── 女優一覧 ────── */
  --actress-card-w:     100px;
  --actress-card-h:     145px;
  --actress-photo-size: 100px;   /* 円形写真 */
  --actress-col-gap:     17px;   /* 列間 */
  --actress-row-gap:     30px;   /* 行間 */

  /* ────── 女優詳細プロフィール ────── */
  --actress-detail-photo:  140px;   /* 円形写真直径 */
  --actress-detail-prof-h: 200px;   /* プロフィールカード高さ */
  --actress-detail-info-h: 100px;   /* 情報エリア高さ */
  --actress-detail-label-w: 150px;  /* ラベル列幅 */
}

/* ─── z-indexトークン ─── */
:root {
  --z-header: 100;
  --z-modal:  9999;
}