/* ============================================================
   tokens.css — デザイントークン一元管理（§4）
   一次情報源: Figma「BP2_top_fix0714」A案指示書 + Dev Mode MCP 実測値
   （2026-07-15 抽出。色は Figma デザイン変数名を併記）
   ★ここが唯一のデザイン値の出どころ。他CSSに色・サイズの直値を書かない。
   ============================================================ */
/* ------------------------------------------------------------
   【規約からの意図的逸脱・理由明記（規約§0.4準拠）】
   bohr は CSSカスタムプロパティによるトークン集中管理を持たないが、
   本案件は「色・フォントを1ファイル差し替えでリブランド可能にする」
   ことを提案の核とする（構築仕様§4）。そのため tokens.css を維持する。
   WP化時は他CSSより先に enqueue（handle 'theme-tokens'）する想定。
   ------------------------------------------------------------ */

:root {
  /* --- ブランドカラー（Figma変数 / 将来ここだけ差し替えれば全体が変わる） --- */
  --color-bg:            #ffffff;   /* 真っ白 — 本文背景 */
  --color-bg-off:        #f9f9f9;   /* オフホワイト */
  --color-text:          #1f1f1f;   /* BLK — 本文文字・黒面 */
  --color-text-inverse:  #f9f9f9;   /* オフホワイト — ダーク面上の文字 */
  --color-brand:         #1f1f1f;   /* BLK — 主要ブランド色 */
  --color-accent:        #ca242a;   /* 赤 — ナビhover・フッター頭文字 */
  --color-accent-dark:   #9a060a;   /* ダークレッド — 見出し頭文字・タブactive・バッジ */
  --color-gray:          #68696b;   /* グレー — 非activeタブ・バッジ・hover面 */
  --color-gray-light:    #dddddd;   /* ライトグレー — 枠線・面・ボタン */
  --color-gray-2:        #b6b6b6;   /* グレー2 */

  /* --- ダークなヘッダー／フッター（BP1 白ベースとの差別化 = 明示要件） --- */
  --color-header-bg:     var(--color-brand);
  --color-header-text:   var(--color-text-inverse);
  --color-footer-bg:     var(--color-brand);
  --color-footer-text:   var(--color-text-inverse);

  /* --- 状態色（指示書「ボタン ホバー時など」） --- */
  --color-btn-hover:        var(--color-gray);        /* 黒ボタン・白カード hover→グレー */
  --color-btn-light-hover:  var(--color-accent-dark); /* ライトグレーボタン hover→ダークレッド */
  --color-nav-hover:        var(--color-accent);      /* ナビ・フッターリンク hover→赤 */

  /* --- タイポグラフィ（指示書「使用フォント」+ 実測） --- */
  --font-base: "Noto Sans JP", system-ui, sans-serif;  /* 和文 */
  --font-en:   "Jost", "Noto Sans JP", sans-serif;     /* 英字見出し・ボタン英字 */
  --fs-base: 16px;
  --lh-base: 1.7;

  /* 部品ごとの実測値 */
  --fs-section-head: 48px;      /* セクション見出し Jost Medium 字間15% */
  --ls-section-head: 0.15em;
  --fs-catch: 48px;             /* 施設概要キャッチ Noto Medium 字間5% */
  --fs-lead: 24px;              /* 施設概要リード（lh 40px） */
  --fs-nav: 16px;               /* ナビ Jost Medium 字間10% */
  --fs-btn-en: 20px;            /* ボタン内英字 Jost Medium 字間15% */
  --fs-btn-jp: 16px;            /* ボタン内和文 Noto Medium 字間5% */
  --fs-date: 16px;              /* 年月日 Noto SemiBold 字間5% */
  --fs-card-title: 20px;        /* 映画名・店名 Noto SemiBold 字間5% */
  --fs-card-title-sm: 18px;     /* レストラン店名 */
  --fs-card-title-xs: 16px;     /* SHOP&CULTURE店名 */
  --fs-badge: 12px;             /* ニュースカテゴリバッジ Jost Medium 字間15% */
  --fs-tab: 16px;               /* タブ Jost Medium 字間20% */
  --fs-floor-list: 13px;        /* フロアガイド店名 字間5% */
  --fs-footer-head: 16px;       /* フッター見出し Jost Medium 字間15% */
  --fs-footer-link: 12px;       /* フッターリンク Noto Regular 字間15% */

  /* --- スペーシング（指示書「余白について」） --- */
  --space-text: 16px;        /* 文章同士の上下 基本16px（場所により20px） */
  --space-text-lg: 20px;
  --space-tight: 8px;        /* 見出し-本文など関係の近いテキスト 8px（10px） */
  --space-tight-lg: 10px;
  --space-section: 160px;    /* セクション上下間 基本160px */
  --space-section-sm: 80px;  /*   要素の少ないセクションは80px */
  --space-head-gap: 50px;    /* セクション見出し→コンテンツ（実測 CINEMA 184→234） */
  --space-card-gap: 40px;    /* 320pxカード3列の列間（実測） */
  --space-card-gap-sm: 24px; /* 242pxカード4列の列間（実測） */
  --space-card-row: 60px;    /* カードの行間（実測） */

  /* --- 角丸・影・線 --- */
  --radius-card: 5px;        /* アンカーカード・導線カード */
  --radius-pill: 24px;       /* ピル型ボタン（h45） */
  --radius-tab: 15px;        /* タブ上角丸 */
  --radius-badge: 16px;      /* ニュースバッジ右下角丸 */
  --shadow-card: 4px 4px 4px rgba(0, 0, 0, 0.15);  /* SHOP&CULTUREカード実測 */
  --border-dark: 1px solid var(--color-text);
  --border-light: 1px solid var(--color-gray-light);
  --border-inverse: 1px solid var(--color-text-inverse);

  /* --- レイアウト（指示書: PC版フレーム1440px / コンテンツ1040px） --- */
  --container-max: 1040px;
  --frame-max: 1440px;
  --gutter: 20px;            /* SP・中間幅の左右余白 */
  --header-h: 80px;          /* ヘッダー実測 */

  /* --- 部品実測サイズ --- */
  --btn-h: 45px;             /* ピル型ボタン高さ */
  --chip-w: 88px;            /* フロア表記チップ */
  --chip-h: 25px;
  --anchor-card-w: 217px;    /* 施設概要・ACCESS等の導線カード */
  --anchor-card-h: 145px;
}

/* --- ブレークポイント（§4 準拠。メディアクエリ内で直接px指定）
   sp:  〜767px
   tab: 768〜1023px
   pc:  1024px〜
   ------------------------------------------------------------ */

/* SP用にトークンを一段階縮小（§6.5 適応ルール。SPフレーム非支給のため） */
@media (max-width: 767px) {
  :root {
    --fs-section-head: 32px;
    --fs-catch: 28px;
    --fs-lead: 16px;
    --fs-btn-en: 18px;
    --fs-card-title: 18px;
    --fs-card-title-sm: 16px;
    --space-section: 96px;
    --space-section-sm: 64px;
    --space-head-gap: 32px;
    --space-card-row: 48px;
    --header-h: 64px;
  }
}