/* ============================================================
   ペットフードOEM.com 共通トークン / ベース
   全モック共通の CSS 変数・リセット・プレースホルダ定義
   ============================================================ */

:root {
  /* ブランドカラー（確定） */
  --pfo-main: #4A5D3A;
  --pfo-main-10-darker: #3A4B2D;
  --pfo-main-10-lighter: #5C7049;
  --pfo-sub: #A8B88E;
  --pfo-sub-soft: #D6DEC6;
  --pfo-sub-faint: #EDF0E5;
  --pfo-cta: #D97B29;
  --pfo-cta-dark: #B8651D;
  --pfo-bg: #FFFFFF;
  --pfo-text: #1F2817;
  --pfo-text-sub: #6B7A5A;
  --pfo-warn: #C8543C;

  /* タイポグラフィ */
  --pfo-font-serif: "Noto Serif JP", "Playfair Display", "Times New Roman", serif;
  --pfo-font-sans: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pfo-font-label: "Playfair Display", "Noto Serif JP", serif;
  --pfo-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* レイアウト */
  --pfo-max: 1120px;
  --pfo-gutter: 24px;
  --pfo-section-pad: 80px;
  --pfo-section-pad-sp: 40px;
}

/* モック切替時のメイン色上書きフック（preview.html から注入） */
[data-pfo-tint="darker"]  { --pfo-main: var(--pfo-main-10-darker); }
[data-pfo-tint="lighter"] { --pfo-main: var(--pfo-main-10-lighter); }

/* フォント切替フック：セリフ抑制 */
[data-pfo-serif="off"] {
  --pfo-font-serif: var(--pfo-font-sans);
  --pfo-font-label: var(--pfo-font-sans);
}

/* リセット（スコープ内のみに適用） */
.pfo-mock-swell,
.pfo-mock-gensen,
.pfo-mock-original,
.pfo-mock-final {
  color: var(--pfo-text);
  background: var(--pfo-bg);
  font-family: var(--pfo-font-sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.pfo-mock-swell *,
.pfo-mock-gensen *,
.pfo-mock-original *,
.pfo-mock-final * {
  box-sizing: border-box;
}
.pfo-mock-swell a,
.pfo-mock-gensen a,
.pfo-mock-original a,
.pfo-mock-final a {
  color: inherit;
  text-decoration: none;
}
.pfo-mock-swell button,
.pfo-mock-gensen button,
.pfo-mock-original button,
.pfo-mock-final button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}
.pfo-mock-swell h1, .pfo-mock-swell h2, .pfo-mock-swell h3, .pfo-mock-swell h4,
.pfo-mock-gensen h1, .pfo-mock-gensen h2, .pfo-mock-gensen h3, .pfo-mock-gensen h4,
.pfo-mock-original h1, .pfo-mock-original h2, .pfo-mock-original h3, .pfo-mock-original h4,
.pfo-mock-final h1, .pfo-mock-final h2, .pfo-mock-final h3, .pfo-mock-final h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pfo-mock-swell p, .pfo-mock-gensen p, .pfo-mock-original p, .pfo-mock-final p { margin: 0; }

/* 共通プレースホルダ（斜めストライプ） */
.pfo-ph {
  position: relative;
  overflow: hidden;
  background-color: var(--pfo-sub-faint);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(74, 93, 58, 0.08) 0,
    rgba(74, 93, 58, 0.08) 1px,
    transparent 1px,
    transparent 10px
  );
  color: var(--pfo-text-sub);
  font-family: var(--pfo-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.pfo-ph::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(74, 93, 58, 0.25);
  pointer-events: none;
}
.pfo-ph-label {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

/* 英字セクションラベル（共通パーツ） */
.pfo-eyebrow {
  font-family: var(--pfo-font-label);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--pfo-text-sub);
}
.pfo-section-num {
  font-family: var(--pfo-font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--pfo-main);
}

/* スクリーンリーダ向け */
.pfo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}