@charset "UTF-8";
/*!
 * nawate-theme-v1 — なわて日和のテーマ
 *
 * ds-core-v1.css のトークンを、なわて日和で実際に使われている色と書体へ差し替える。
 * 色は app/globals.css の :root（139-195行）にある既存トークンだけを使う。
 *   --color-base #173b2e / --color-paper #f4f0e7 / --color-surface #fffdf8
 *   --color-ink  #20251f / --color-muted #62675f / --color-accent #b78b3e
 *   --color-line #d9d2c4
 * 書体は app/layout.tsx で既に読み込んでいる Noto Sans JP / Shippori Mincho のみ。
 *
 * 重要:
 *  - ds-core-v1.css はファイル末尾で `:root{--ds-gold-on-dark:...}` を宣言している。
 *    読み込み順に依存しないよう、このファイルの上書きは `.ds.nawateTheme`（詳細度 0,2,0）
 *    で当てて :root（0,1,0）と .ds（0,1,0）の両方に確実に勝たせる。
 *  - --ds-gold(#b78b3e) は明るい地の小さな文字だと 2.4〜3.9:1 にしかならない。
 *    明るい地の小さな文字は --ds-ink-soft、濃色面は --ds-gold-on-dark を使う。
 *    ボタンの地に使う場合は白ではなく墨（--ds-ink）を乗せる（5.03:1）。
 */

:root,
.ds.nawateTheme {
  --ds-ink: #20251f;
  --ds-ink-soft: #62675f;
  --ds-paper: #f4f0e7;
  --ds-surface: #fffdf8;
  --ds-line: #d9d2c4;
  --ds-accent: #173b2e;
  --ds-accent-ink: #f4f0e7;
  --ds-gold: #b78b3e;
  /* 濃色面（#173b2e）の小さな文字用。#b78b3e と同系の明るいトーン、5.9:1 */
  --ds-gold-on-dark: #dcb173;
  --ds-dark: #173b2e;
  --ds-on-dark: #f4f0e7;
  --ds-on-dark-soft: rgba(244, 240, 231, .8);

  --ds-serif: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --ds-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --ds-label: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ------------------------------------------------------------------
   1. 明るい地の「小さな文字」を金から墨寄りへ逃がす
   ------------------------------------------------------------------ */
.ds.nawateTheme .ds-scene__n,
.ds.nawateTheme .ds-scene__facts dt,
.ds.nawateTheme .ds-move__facts dt,
.ds.nawateTheme .ds-plan__spot em,
.ds.nawateTheme .ds-card__facility span {
  color: var(--ds-ink-soft);
}
.ds.nawateTheme .ds-plan__day b {
  color: var(--ds-accent);
}
/* 濃色セクションでは同系の明るいトーンへ戻す（ds-core と同じ振る舞い） */
.ds.nawateTheme .ds-section--dark .ds-kicker,
.ds.nawateTheme .ds-section--dark .ds-scene__n,
.ds.nawateTheme .ds-section--dark .ds-scene__facts dt,
.ds.nawateTheme .ds-section--dark .ds-move__facts dt {
  color: var(--ds-gold-on-dark);
}

/* ------------------------------------------------------------------
   2. 金の面に乗る文字は白ではなく墨（#b78b3e × #20251f = 5.03:1）
   ------------------------------------------------------------------ */
.ds.nawateTheme .ds-btn--primary {
  background: var(--ds-gold);
  color: var(--ds-ink);
  font-weight: 600;
}
.ds.nawateTheme .ds-card__rank {
  background: var(--ds-accent);
  color: var(--ds-on-dark);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   3. 書体まわりの微調整（明朝は日本語の字面が大きいので字間を締める）
   ------------------------------------------------------------------ */
.ds.nawateTheme h1,
.ds.nawateTheme h2,
.ds.nawateTheme h3,
.ds.nawateTheme h4 {
  font-weight: 600;
  letter-spacing: .02em;
}
.ds.nawateTheme .ds-kicker {
  letter-spacing: .18em;
  font-size: 11.5px;
  font-weight: 500;
}
.ds.nawateTheme .ds-hero__eyebrow {
  letter-spacing: .2em;
  font-size: 11.5px;
}