/* Hallmark · tokens: peekino.com — アプリ Theme.swift を Web に移植した正本
 * paper-band: light F4E3C1 / dark 221B12 · display: pixel (Silkscreen) + system JP · accent: warm amber
 * ライト=昼の工房（羊皮紙）／ダーク=夜の工房（星空）。アプリと同じ適応配色。 */
:root {
  /* ---- 色（ライト=昼の工房） ---- */
  --color-paper: #f4e3c1;        /* Theme.ground light */
  --color-surface: #fbf3de;      /* Theme.surface light */
  --color-ink: #3a2e22;          /* Theme.ink light */
  --color-muted: #6f5638;        /* Theme.muted 8A6E4E を Web の文字コントラスト AA（4.5:1）用に深めた値 */
  --color-accent: #9a4f1c;       /* Theme.brandMark B4642A を同上の理由で深めた値（リンク文字に使うため） */
  --color-honey: #f5a524;        /* Theme.honey（ボタン地・両モード共通） */
  --color-on-honey: #3a2e22;     /* Theme.onHoney */
  --color-line: rgba(58, 46, 34, 0.28);
  --color-blueprint: rgba(58, 46, 34, 0.06);  /* 設計図グリッド */
  --color-card-shadow: rgba(58, 46, 34, 0.14);
  --color-focus: #b4642a;
  --scene-day: block; --scene-night: none;

  /* ---- 書体（2書体規律: ピクセル表示 + システム本文） ---- */
  --font-display: "Silkscreen", "Courier New", monospace;  /* PEEKINO ワードマーク・数字 */
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;

  /* ---- 寸法（4pt スケール） ---- */
  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem;
  --space-lg: 2rem;   --space-xl: 3.5rem;  --space-2xl: 5.5rem; --space-3xl: 8rem;
  --radius-card: 12px; --radius-pill: 999px;
  --measure: 38rem;

  /* ---- 文字サイズ ---- */
  --text-display: clamp(2rem, 6.5vw, 4.15rem);
  --text-title: clamp(1.45rem, 3.4vw, 2.1rem);
  --text-lead: 1.0625rem; --text-body: 1rem; --text-small: 0.875rem;

  /* ---- 動き ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 180ms; --dur-reveal: 480ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- 色（ダーク=夜の工房） ---- */
    --color-paper: #221b12;      /* Theme.ground dark */
    --color-surface: #2c2318;    /* Theme.surface dark */
    --color-ink: #f3e7ce;        /* Theme.ink dark */
    --color-muted: #a9977a;      /* Theme.muted dark */
    --color-accent: #f5a524;     /* Theme.brandMark dark = honey */
    --color-line: rgba(245, 165, 36, 0.32);
    --color-blueprint: rgba(95, 168, 181, 0.10);  /* 夜の設計図（青銅色） */
    --color-card-shadow: rgba(0, 0, 0, 0.45);
    --color-focus: #f5a524;
    --scene-day: none; --scene-night: block;
  }
}