/* ============================================================
   theme/ampl-mobile.css — AMPL Mobile
   白背景と墨色を基本に、AMPL Blue を小さな強調に使う。
   engine/mobile.css のCSS変数を上書きしてテーマを適用する。
   ============================================================ */

@import url('../shared/ampl-base.css');

:root {
  --color-bg:         #ffffff;
  --color-fg:         #131313;
  --color-muted:      rgba(19,19,19,.5);
  --color-accent:     #131313;
  --color-border:     rgba(19,19,19,.1);
  --color-card-bg:    #fff;
  --color-icon-bg:    rgba(0,0,0,.04);
  --color-callout-bg: rgba(0,0,0,.03);
  --color-section-bg: #131313;
  --color-section-fg: #ffffff;

  --noise-opacity: 0;

}

/* ── 見出しフォント ── */
.headline,
.section-title,
.cover__title,
.stat-card__number,
.agenda__num,
.person__name {
  font-family: var(--font-heading);
}

/* ── Cover ── */
.slide-cover {
  background: #ffffff;
}
.cover__label {
  font-size: var(--text-meta);
  color: var(--color-accent);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.cover__title {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-fg);
}
.cover__title .hl {
  background: linear-gradient(transparent 60%, rgba(0,0,0,.07) 60%);
  padding: 0 4px;
}
.cover__tagline {
  font-size: var(--text-sm);
  color: rgba(19,19,19,.6);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.cover__meta {
  margin-top: 32px;
  font-size: var(--text-meta);
  color: var(--color-muted);
  line-height: 1.9;
}
.cover__meta strong { color: var(--color-fg); font-weight: 700; }
.cover__date {
  font-size: var(--text-meta);
  color: rgba(19,19,19,.35);
  margin-top: 8px;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}

/* ── Section Break ── */
.slide-section {
  background: var(--color-section-bg);
}
.section-label {
  color: var(--color-accent);
}
.section-title {
  color: var(--color-section-fg);
}
.section-tags {
  color: rgba(255,255,255,.4);
}

/* ── 無彩色の背景ユーティリティ ── */
.bg-clay  { background: rgba(0,0,0,.035); }
.bg-kraft { background: rgba(0,0,0,.03); }
.bg-oat   { background: rgba(0,0,0,.035); }

/* ── カード境界を薄いグレーに ── */
.stat-card,
.card,
.stack-item,
.feature-card,
.quote-block,
.chart-container {
  border-color: rgba(0,0,0,.05);
}

/* ── アイコン背景を無彩色に ── */
.stack-item__icon,
.feature-card__icon {
  background: rgba(0,0,0,.04);
  color: var(--color-accent);
}

/* ── 人物アバター ── */
.person__avatar {
  background: rgba(0,0,0,.05);
  color: var(--color-accent);
  font-family: var(--font-heading);
}

/* ── ロードマップ ── */
.roadmap__phase--future {
  background: rgba(0,0,0,.05);
  color: var(--color-fg);
}

/* ── 引用 ── */
.quote-block::before {
  color: rgba(0,0,0,.06);
}
.quote-block__author {
  color: var(--color-accent);
}

/* ── SVG装飾のデフォルト色 ── */
.deco circle,
.deco path,
.deco rect,
.deco line {
  stroke: var(--color-accent);
}

/* Mobile は .deck を使わない別エンジン。デスクトップの骨格は適用されない。 */
.slide h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); line-height: 1.2; }
.cover__label, .section-label, .agenda__num { color: var(--color-blue); }