/* base.css — design tokens (CSS variables) + base typography */
:root {
  /* ---- Brand color (FANZA-ish: 黒 × ピンク/レッド アクセント) ---- */
  --dmm-bg:            #0e0e12;
  --dmm-bg-elev:       #17171f;
  --dmm-surface:       #1f1f2a;
  --dmm-border:        #2e2e3c;
  --dmm-text:          #f3f3f6;
  --dmm-text-muted:    #b8b8c8;   /* 暗背景でAAコントラスト確保（旧#a7a7b4は4.3:1で不足） */
  --dmm-primary:       #ff2d6a;   /* メインCTA */
  --dmm-primary-dark:  #d81457;
  --dmm-accent:        #ffc12e;   /* セール/強調 */
  --dmm-success:       #2ec28a;

  /* ---- Typography ---- */
  --dmm-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
              "Yu Gothic", Meiryo, system-ui, sans-serif;
  --dmm-fs-base: 16px;

  /* ---- Spacing scale ---- */
  --dmm-sp-1: 0.5rem;
  --dmm-sp-2: 1rem;
  --dmm-sp-3: 1.5rem;
  --dmm-sp-4: 2rem;
  --dmm-sp-5: 3rem;
  --dmm-sp-6: 4.5rem;

  /* ---- Layout ---- */
  --dmm-container: 720px;     /* 縦長LPなので狭め */
  --dmm-radius: 14px;
  --dmm-radius-sm: 8px;
  --dmm-shadow: 0 10px 30px rgba(0,0,0,.45);
}

html { font-size: var(--dmm-fs-base); }
body {
  font-family: var(--dmm-font);
  background: var(--dmm-bg);
  color: var(--dmm-text);
}

.dmm-container {
  width: 100%;
  max-width: var(--dmm-container);
  margin-inline: auto;
  padding-inline: var(--dmm-sp-2);
}

.dmm-section { padding-block: var(--dmm-sp-6); }
.dmm-section--tight { padding-block: var(--dmm-sp-4); }

.dmm-h2 {
  font-size: clamp(1.4rem, 5vw, 2rem);
  text-align: center;
  margin-bottom: var(--dmm-sp-1);
}
.dmm-lead {
  text-align: center;
  color: var(--dmm-text-muted);
  margin-bottom: var(--dmm-sp-4);
}
.dmm-accent-text { color: var(--dmm-accent); }
.dmm-primary-text { color: var(--dmm-primary); }

/* visually-hidden for a11y */
.dmm-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* prefers-reduced-motion: 前庭疾患ユーザー向けにアニメーションを抑制 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dmm-sticky-cta { transform: none !important; opacity: 0; }
  .dmm-sticky-cta.is-visible { opacity: 1; }
  .dmm-cta:hover, .dmm-related__card:hover { transform: none; }
}