@charset "UTF-8";
/* ============================================================
   jpmono.com — Design Tokens
   "Editorial × Wabi-Sabi × Modern Commerce"
   ------------------------------------------------------------
   ここに書かれた CSS Variables だけが唯一の真実 (single source of truth)。
   base.css / components.css / front-page.php / single.php 等は
   このファイル経由で色・サイズ・モーションを参照する。
   ------------------------------------------------------------
   作成: 2026-05-23
   ============================================================ */

:root {
  /* ── Color ───────────────────────────────────────────────
     純白 (#FFF) と純黒 (#000) は禁止。
     朱 (--accent-red) は面積比 5% 以下、CTA/Eyebrow/Hover のみ。
  */
  --bg-primary:     #FAF7F2;  /* 生成り、和紙の白 */
  --bg-secondary:   #F2EDE5;  /* セクション切替用、少し濃い背景 */
  --bg-elevated:    #FFFFFF;  /* カード等、ごく稀に純白に近づけたい時のみ。実体は #FDFCFA に寄せる */
  --bg-overlay:     rgba(26,23,21,.55); /* 写真の上の文字読みやすさ用 */

  --ink-primary:    #1A1715;  /* 墨色 — 純黒は使わない */
  --ink-secondary:  #5C544D;  /* サブテキスト、温かいグレー (contrast 7:1 on bg-primary) */
  --ink-muted:      #6E6760;  /* caption / meta (contrast 5.0:1, WCAG AA 通過) */
  --ink-muted-on-light: #807870; /* 写真の上等、4.5:1 でよい場面用 */
  --ink-inverse:    #FAF7F2;  /* 暗い背景上のテキスト */

  --accent-red:     #B83A2E;  /* 朱 — CTA 等限定 */
  --accent-red-dk:  #8E2A20;  /* hover */
  --accent-red-soft:#F4E4E0;  /* タグ背景など淡い用途 (面積 5% 規制の外側を補助) */

  --border-subtle:  #E5DDD2;  /* 罫線、カード境界 */
  --border-strong:  #C9BFB1;  /* フォーカスリング、注意境界 */
  --focus-ring:     #B83A2E;  /* a11y フォーカス */

  /* 写真オーバーレイ用グラデ (画像下部のテキスト保護のみ可) */
  --photo-overlay-bottom: linear-gradient(180deg, rgba(26,23,21,0) 0%, rgba(26,23,21,.65) 100%);
  --photo-overlay-soft:   linear-gradient(180deg, rgba(26,23,21,0) 40%, rgba(26,23,21,.45) 100%);


  /* ── Typography ─────────────────────────────────────────
     serif: 見出し                  → Cormorant Garamond
     sans:  本文 / UI               → DM Sans
     ja-serif: 日本語 (地名・工芸名)→ Noto Serif JP
     mono:  数字・コード稀用        → ui-monospace
  */
  --font-serif:    "Cormorant Garamond", "EB Garamond", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans:     "DM Sans", "Manrope", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ja-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* タイポグラフィスケール — モバイル基準 */
  --fs-display: 3.000rem;  /* 48 */
  --fs-h1:      2.250rem;  /* 36 */
  --fs-h2:      1.750rem;  /* 28 */
  --fs-h3:      1.250rem;  /* 20 */
  --fs-eyebrow: 0.750rem;  /* 12 */
  --fs-body-lg: 1.125rem;  /* 18 */
  --fs-body:    1.000rem;  /* 16 */
  --fs-caption: 0.8125rem; /* 13 */
  --fs-button:  0.875rem;  /* 14 */

  --lh-display: 1.167;     /* 56/48 */
  --lh-h1:      1.222;     /* 44/36 */
  --lh-h2:      1.286;     /* 36/28 */
  --lh-h3:      1.400;     /* 28/20 */
  --lh-eyebrow: 1.333;     /* 16/12 */
  --lh-body-lg: 1.667;     /* 30/18 */
  --lh-body:    1.625;     /* 26/16 */
  --lh-caption: 1.538;     /* 20/13 */
  --lh-button:  1.143;     /* 16/14 */

  --tracking-display: -0.02em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.01em;
  --tracking-eyebrow:  0.12em;
  --tracking-button:   0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --measure-max: 65ch;     /* 行長上限 */


  /* ── Spacing  (8px base) ────────────────────────────────
     4, 8, 12, 16, 24, 32, 48, 64, 96, 128
  */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32:128px;

  /* セクション垂直パディング (mobile / desktop) */
  --section-py-mobile:  var(--space-16); /* 64 */
  --section-py-tablet:  var(--space-20, 80px);
  --section-py-desktop: var(--space-24); /* 96 */
  --section-py-large:   var(--space-32); /* 128 */

  /* コンテナ最大幅 */
  --container-max:      1280px;
  --container-narrow:   960px;
  --container-reading:  720px;
  --container-px:       var(--space-6); /* 24 */


  /* ── Radius ─────────────────────────────────────────────
     角丸は控えめ。画像は基本シャープ (0px)。
  */
  --radius-card:   2px;
  --radius-button: 4px;
  --radius-input:  4px;
  --radius-pill:  999px;
  --radius-img:    0;


  /* ── Shadow  (極めて控えめ) ─────────────────────────── */
  --shadow-1: 0 1px 2px rgba(26,23,21,.04);
  --shadow-2: 0 1px 2px rgba(26,23,21,.04), 0 8px 24px rgba(26,23,21,.04);
  --shadow-hover: 0 1px 2px rgba(26,23,21,.04), 0 12px 32px rgba(26,23,21,.06);


  /* ── Border ─────────────────────────────────────────── */
  --border-thin:   1px solid var(--border-subtle);
  --border-strong-line: 1px solid var(--border-strong);


  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;  /* 画像ズーム */
  --dur-xslow:  1200ms;  /* hero crossfade */

  --hover-image-scale: 1.04;


  /* ── Aspect Ratio (画像枠統一) ─────────────────────── */
  --ar-square:   1 / 1;   /* カテゴリーカード */
  --ar-region:   4 / 5;   /* 地域カード */
  --ar-article:  4 / 3;   /* 記事カード */
  --ar-hero:    16 / 9;   /* fallback */
  --ar-product:  3 / 4;   /* 商品カード */


  /* ── Z-index scale ─────────────────────────────────── */
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:    100;   /* sticky header */
  --z-drawer:    900;   /* モバイル全画面ドロワー */
  --z-modal:    1000;
  --z-toast:    1100;
  --z-popover:  1200;
}


/* ── Tablet / Desktop で 1.15〜1.3 倍 ─────────────────── */
@media (min-width: 768px) {
  :root {
    --fs-display: 3.500rem;   /* 56 */
    --fs-h1:      2.625rem;   /* 42 */
    --fs-h2:      2.000rem;   /* 32 */
    --fs-h3:      1.375rem;   /* 22 */
    --fs-body-lg: 1.1875rem;  /* 19 */
    --container-px: var(--space-8); /* 32 */
  }
}

@media (min-width: 1100px) {
  :root {
    --fs-display: 4.000rem;   /* 64 */
    --fs-h1:      3.000rem;   /* 48 */
    --fs-h2:      2.250rem;   /* 36 */
    --fs-h3:      1.500rem;   /* 24 */
    --fs-body-lg: 1.25rem;    /* 20 */
    --container-px: var(--space-12); /* 48 */
  }
}


/* ── prefers-reduced-motion ────────────────────────────
   仕様 6 番（A11y）と Hero の autoplay 停止に対応。
   個別コンポーネント側でも参照する。
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --dur-xslow: 0ms;
    --hover-image-scale: 1.00;
  }
}