/* ============================================================================
   theme.css  —  サイトの色とフォント(全ページ共通)
   ----------------------------------------------------------------------------
   ★色を変えたい時は、このファイルの値を書き換えるだけでOK。
     index.html と works.html の両方が、この1ファイルを読み込んでいる。
     (site-ui.js の右下ボタンの色も、ここの変数を読みます)
     背景・文字・アクセント・ボタン・オーバーレイ・影の色まで、
     見た目に効く色はすべてここに集約してある。

   ※ページの最大幅 --max-w は、ページごとに違うので各HTML側に置いてある
     (index=980px / works=1080px)。色ではないのでここには入れない。

   ※スマホのブラウザ上部バーの色(theme-color)だけは、HTMLの<meta>タグで
     CSS変数が使えないため各HTML側に直書き。--bg を変えたら、そちらも手で合わせる。

   ※このファイルは外部CSSなので、ローカルで確認する時は簡易サーバー経由で開くこと
     (file:// 直開きだと読み込まれないことがある)。GitHub Pagesでは普通に動く。
   ========================================================================== */

:root {
  /* --- 基本 --- */
  --bg:         #0c0c13;   /* ページ背景(深い宇宙の黒) */
  --bg-card:    #222631;   /* 作品カードなどの背景 */
  --text:       #e8edf0;   /* メイン文字色 */
  --text-sub:   #a9afae;   /* 薄い文字(本文) */
  --text-faint: #767c80;   /* もっと薄い文字(補足) */
  --accent:     #c77983;   /* アクセント(肩書・リンクホバー・枠) */

  /* --- 右下ボタン(FAB)・メニュー --- */
  --fab-bg:        #f4f3ee;             /* ボタン/小丸の背景(オフホワイト) */
  --fab-icon:      #1c1c1c;             /* ボタン/小丸の中のアイコン色 */
  --fab-close:     #cf262c;             /* 開いた×にホバーした時の赤 */
  --fab-current:   rgb(199, 121, 131);/* 今いる場所のボタンの色(薄く) */
  --fab-label-bg:  rgb(19, 19, 19);  /* ラベルの背景 */
  --fab-label-tx:  #e8edf0;             /* ラベルの文字色 */
  --fab-scrim:     rgba(12, 12, 12, 0.4); /* 展開時の半透明オーバーレイ */

  /* --- 作品オーバーレイ(明るいパネル) --- */
  --ov-panel:   #eeeae3;   /* パネル背景 */
  --ov-head:    #eeeae3;   /* パネル上部の帯 */
  --ov-text:    #1d1c1b;   /* パネルの見出し文字 */
  --ov-tools:   #353431;   /* 使用ツールの文字 */
  --ov-desc:    #1d1c1b;   /* 説明文の文字 */
  --ov-line:    #1d1c1b;   /* 区切り線 */
  --ov-scrim:   rgba(12, 13, 17, 0.692);  /* 作品を開いた時、後ろにかかる暗幕 */
  --ov-slider-bg: #202020;               /* 写真スライダーの下地(写真が収まらない余白) */
  --ov-arrow-bg:  rgba(0,0,0,0.45);   /* 左右の矢印・カウンターの背景 */
  --ov-arrow-tx:  #e8edf0;            /* 矢印・カウンターの文字色 */
  --ov-link:       #cf262c;   /* 「View Site ↗」の色(通常時) */
  --ov-link-hover: #cf262c;   /* 「View Site ↗」の色(ホバー時) */
  /* --- その他 --- */
  --name-glow:  rgba(15, 16, 19, 0.5);   /* 中央「Sumi」の後ろの影(星に負けないための暗がり) */
  --fab-open-bg: #f4f3ee;             /* 右下ボタンを開いた時の背景(白) */

  /* --- フォント --- */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans:  "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}