/**
 * Dram Verdict — Design tokens
 * docs/DESIGN_SYSTEM.md
 *
 * ここには値の定義だけを置く。セレクタへの適用は base.css / components.css で行う。
 */

:root {
	/* ---- Color（2026-09-09 改定・恒久ブランドパレット / Light Luxury Editorial）
	 * docs/DESIGN_SYSTEM.md 参照。承認済み5色: bg / ink / soft-neutral(border) /
	 * muted text / gold。それ以外はすべてこの5色から導出した文書化済み派生色
	 * （ホバー・アクセシビリティ確保のための濃淡調整）であり、新しいブランド色を
	 * 勝手に増やしたものではない。導出根拠は各行のコメントに contrast ratio で記す。
	 * -------------------------------------------------------------------- */
	--dv-bg:            #FAF9F6;
	--dv-surface:       #FFFFFF;
	--dv-surface-alt:   #EEECE8;  /* ごく淡いセカンダリ面。--dv-border 35% を --dv-bg に混ぜた派生色 */

	--dv-ink:           #171717;  /* 17.0:1 on --dv-bg */
	--dv-ink-hover:     #262626;  /* ボタン等、--dv-ink 塗りつぶし要素のホバー専用派生色 */
	--dv-ink-muted:     #5F5A54;  /*  6.5:1 on --dv-bg */
	--dv-ink-faint:     #8A857D;  /*  3.6:1 — 大きい文字・非テキストのみ（フレーバー要約の区切り記号など） */

	--dv-border:        #D8D4CD;  /* 罫線・区切り線・ごく淡いパネル専用。本文色として使わない */
	--dv-border-strong: #8C8A85;  /* フォーム入力枠など、より視認性が必要な境界線専用。3.3:1 on --dv-bg（旧配色の1.57:1から改善） */

	/* ゴールドアクセント（#9B7A3F）— 罫線・アイコン・小さいバッジ・グラフィカルな
	   塗りなど"非テキスト"専用。#9B7A3F は本文サイズの文字色としては
	   3.8:1 しかなく WCAG AA（4.5:1）を満たさないため、文字色には必ず
	   --dv-gold-text を使う（docs/DESIGN_SYSTEM.md に理由を記載）。 */
	--dv-gold:            #9B7A3F;  /* 3.8:1 on --dv-bg — 非テキスト専用 */
	--dv-gold-text:       #846836;  /* 4.97:1 on --dv-bg — リンク・小見出し等の文字色用アクセシブル派生色 */
	--dv-gold-text-hover: #70582E;  /* 6.38:1 on --dv-bg — 上記のホバー状態 */
	--dv-gold-soft:       #F4F1EB;  /* 選択中タブ等の淡いゴールド背景（この上で --dv-gold-text が4.64:1を保つ濃度） */

	--dv-pros:          #15803D;
	--dv-cons:          #B42318;
	--dv-focus:         #1D4ED8;

	/* 2026-09-09 追記: 本文中の通常インラインリンク専用色（Review/Guide本文・
	   About・Contact・trust page・FAQ回答・テーブルセル内リンク等）。
	   ナビ・フッター・カード・ボタン・ラベルには使わない —
	   それらは引き続き --dv-ink / --dv-gold-text のまま。
	   スコープは base.css の `.post_content a` にのみ適用する。 */
	--dv-link:          #2563EB;  /* 4.91:1 on --dv-bg / 5.17:1 on white */
	--dv-link-hover:    #1D4ED8;  /* 6.37:1 on --dv-bg / 6.70:1 on white（--dv-focus と同値） */

	/* ---- Typography ------------------------------------------------- */
	--dv-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--dv-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--dv-fs-display: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
	--dv-fs-h2:      clamp(1.5rem,   1.32rem + 0.8vw, 1.875rem);
	--dv-fs-h3:      clamp(1.1875rem, 1.13rem + 0.3vw, 1.375rem);
	--dv-fs-body:    clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
	--dv-fs-small:   clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
	--dv-fs-caption: 0.8125rem;
	--dv-fs-score:   clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);

	--dv-lh-body:    1.75;
	--dv-lh-heading: 1.25;

	/* ---- Spacing (4px base) ----------------------------------------- */
	--dv-space-1: 4px;
	--dv-space-2: 8px;
	--dv-space-3: 12px;
	--dv-space-4: 16px;
	--dv-space-5: 24px;
	--dv-space-6: 32px;
	--dv-space-7: 40px;
	--dv-space-8: 48px;
	--dv-space-9: 64px;
	--dv-space-10: 80px;
	--dv-space-11: 96px;

	--dv-section-gap: var(--dv-space-8);

	/* ---- Layout ------------------------------------------------------ */
	--dv-max-content:       720px;
	--dv-guide-content:     960px; /* Guide記事の本文行幅。Reviewの --dv-max-content とは独立 */
	--dv-max-wide:          1120px;
	--dv-measure:     68ch;
	--dv-gutter:      20px;

	/* ---- Shape ------------------------------------------------------- */
	--dv-radius-sm: 4px;
	--dv-radius-md: 8px;
	--dv-radius-lg: 12px;

	--dv-shadow-card: 0 1px 2px rgba(26, 26, 26, .04), 0 2px 8px rgba(26, 26, 26, .04);
}

@media (min-width: 768px) {
	:root {
		--dv-gutter: 32px;
		--dv-section-gap: var(--dv-space-10);
	}
}