/* ═══════════════════════════════════════════════════════
   variables.css — Design Tokens
   カラーパレット: 白・灰・黒・紺をベースに
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Noto+Serif+JP:wght@300;400;500&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  /* ── Background Layers ─────────────────────────── */
  --bg-base:      #111114;   /* 最深部: ほぼ黒 */
  --bg-surface:   #1a1a1f;   /* カード・パネル面 */
  --bg-raised:    #222228;   /* 浮いた要素 */
  --bg-overlay:   #2a2a32;   /* ホバー・強調 */

  /* ── Navy Accent ───────────────────────────────── */
  --navy-deep:    #0d1526;   /* 最深紺 */
  --navy:         #162040;   /* 基本紺 */
  --navy-mid:     #1e2d58;   /* 中紺 */
  --navy-light:   #2a3f7a;   /* 明るめ紺 */

  /* ── Text ──────────────────────────────────────── */
  --text-primary:   #f0f0f4;   /* 白に近い */
  --text-secondary: #a8a8b4;   /* 中間グレー */
  --text-muted:     #606070;   /* 薄いグレー */
  --text-disabled:  #3a3a48;   /* ほぼ見えない */

  /* ── Accent ────────────────────────────────────── */
  --accent-red:     #8c2e20;   /* ダークレッド */
  --accent-brown:   #5c3d28;   /* ダークブラウン */
  --accent-gold:    #7a6030;   /* ダークゴールド */

  /* ── Border / Divider ──────────────────────────── */
  --border-strong:  rgba(240,240,244,0.12);
  --border-mid:     rgba(240,240,244,0.07);
  --border-subtle:  rgba(240,240,244,0.04);

  /* ── Film / Photo Mode (Photo Viewer) ─────────── */
  --film-bg:        #0e0e11;
  --film-surface:   #181820;
  --film-bar:       #141418;
  --film-text:      #d0ccc8;
  --film-muted:     rgba(208,204,200,0.4);

  /* ── White / Light ─────────────────────────────── */
  --white:          #f8f8fc;
  --gray-100:       #e8e8ee;
  --gray-200:       #c8c8d2;
  --gray-400:       #888894;
  --gray-600:       #484858;
  --gray-800:       #282832;

  /* ── Typography ────────────────────────────────── */
  --font-serif:     'EB Garamond', serif;
  --font-body:      'Noto Serif JP', serif;
  --font-mono:      'DM Mono', monospace;

  /* ── Spacing ───────────────────────────────────── */
  --nav-h:          54px;
  --page-px:        4rem;

  /* ── Transitions ───────────────────────────────── */
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --duration:       0.35s;
}