/**
 * 01-variables.css — デザイントークン（色・余白・角丸・文字）
 * ★色・寸法はここが唯一の真実。JS・HTML・他の CSS に直書きしない（ARCHITECTURE.md §見た目）。
 *
 * お客様が見る画面＝公式サイト（esquina.jp）と同じブランドで組む。
 *   写したもの（2026-10-25・値は 1 字も変えていない・番人 S4 が正本と照合）：
 *     --gold・--bg-dark・--text-white・--text-gray … 正本＝esquina:css/style.css の :root
 *     --font-sans・--font-serif                  … 正本＝esquina:css/text-look.css の :root（書体は読み込まず端末のものを使う）
 *   写さなかったもの：--header-h・--logo-*（公式サイトのヘッダーの寸法）。
 *   下の「このアプリで足した」名前は、写した名前を参照するか、公式サイトで直書きされている値に名前を付けたもの。
 * ダークだけ（暗い店内で見る＝DECISIONS.md）。ライトモードは持たない。
 */

:root {
  /* --- 写した（esquina:css/style.css） --- */
  --gold: #F5A623;
  --bg-dark: #0a0e1a;
  --text-white: #ffffff;
  --text-gray: #b8bcc8;

  /* --- 写した（esquina:css/text-look.css） --- */
  --font-sans:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'BIZ UDPGothic', 'Yu Gothic UI', 'Yu Gothic', YuGothic, '游ゴシック', Meiryo,
    'Noto Sans CJK JP', system-ui, sans-serif;
  --font-serif:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro',
    'Yu Mincho', YuMincho, '游明朝', '游明朝体', 'MS PMincho',
    'Noto Serif CJK JP', serif;

  /* --- 役割（このアプリで足した・写した名前を参照する） --- */
  --bg-base: var(--bg-dark);
  --text-primary: var(--text-white);
  --text-secondary: var(--text-gray);
  --accent: var(--gold);

  /* --- 公式サイトの直書きの値に名前を付けた（このアプリで足した） --- */
  --bg-header: var(--bg-dark);            /* 上に残る帯の背景。公式サイトの .header は 95%（rgba(10,14,26,.95)）だが、メニューは下の品目が透けて読みにくい＝不透明にした */
  --gold-line: rgba(245, 166, 35, 0.2);   /* esquina:css/style.css .header の下線 */
  --gold-dim: rgba(245, 166, 35, 0.14);   /* esquina:css/news.css の選んだ時の塗り */
  --bg-surface: rgba(255, 255, 255, 0.03); /* カード（このアプリで決めた） */
  --text-tertiary: rgba(184, 188, 200, 0.6); /* --text-gray を薄めた（版の札など） */

  --line-w: 1px;  /* 罫線の太さ */

  /* --- 余白（4px グリッド・guide-maker と同じ刻み） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* --- 角丸 --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* --- 文字の大きさ --- */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 16px;   /* 本文。iPhone で文字が拡大されない下限 */
  --font-lg: 18px;
  --font-xl: 22px;
  --line-body: 1.8;  /* 公式サイトの本文と同じ（esquina:css/style.css body） */

  /* --- メニュー（段階 1・デザイン 3 案で使う。選んだ後に使わない名前は消す） --- */
  --gold-line-strong: rgba(245, 166, 35, 0.45);
  --bg-elevated: rgba(255, 255, 255, 0.06);
  --text-faint: rgba(184, 188, 200, 0.18);
  --font-2xl: 28px;
  --font-3xl: 40px;
  --nav-h: 52px;          /* 上に残る目次の高さ */
  --tap-min: 44px;        /* 指で押す物の最小の高さ（Apple の目安） */
  --radius-pill: 999px;

  /* --- レイアウト --- */
  --app-header-h: 56px;  /* 公式サイトの --header-h（66px）とは別物＝名前を変えた */
  --reading-max: 640px;  /* 本文の幅（スマホは全幅・タブレットで広がりすぎない） */
}