/* =========================================================
   07-presets.css
   デザインプリセット。CSS変数を上書きするだけ。
   body class に nt-preset-{name} が付く。
   ========================================================= */

/* ---------- corporate (default) — BtoB企業 / コーポレート / 制作会社 ----------
   コンセプト:
   - 白基調、薄いブルーグレーの surface で上品さと信頼感
   - 濃紺 primary で安定したブランド色
   - accent は控えめにオレンジ (CTA ボタンで使う)
   - hero / card / button の演出は控えめ。Tech ほどグリッド・グローを入れない
   - Friendly ほど丸くせず、Dark ほど世界観を強くしない
   - デフォルトプリセットなので「クセを強くしすぎない」を厳守
*/

body.nt-preset-corporate {
	/* ----- surfaces: 純白 + ややクールなスレートグレー surface ----- */
	--nt-color-bg: #ffffff;
	--nt-color-surface: #f5f7fb;
	--nt-color-text: #111827;
	--nt-color-muted: #64748b;
	--nt-color-border: #e2e8f0;

	/* ----- role colors: ネイビー primary + 濃紺 secondary + オレンジ accent ----- */
	--nt-color-primary: #1e3a8a;
	--nt-color-primary-contrast: #ffffff;
	--nt-color-secondary: #0f172a;
	--nt-color-secondary-contrast: #ffffff;
	--nt-color-accent: #f97316;
	--nt-color-accent-contrast: #ffffff;

	/* ----- typography: 堅実、わずかに字間を詰める ----- */
	--nt-heading-letter-spacing: -0.01em;

	/* ----- radii: 控えめ ----- */
	--nt-radius-sm: 6px;
	--nt-radius-md: 12px;
	--nt-radius-lg: 18px;

	/* ----- shadows: 静かなスレート ----- */
	--nt-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
	--nt-shadow-md: 0 8px 22px rgba(15, 23, 42, 0.08);
	--nt-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

	/* ----- role surfaces -----
	   hero: surface → 白の落ち着いたグラデーション。装飾は出さない。 */
	--nt-bg-hero: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
	--nt-hero-decoration-opacity: 0;

	/* CTA: 濃紺 → ブルーの落ち着いたグラデーション。
	       中のアクセントボタンはオレンジ (.nt-btn--accent → --nt-color-accent) */
	--nt-bg-cta: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
	--nt-fg-cta: #ffffff;

	/* footer: 濃紺 + 白 (信頼感のある定番) */
	--nt-bg-footer: #0f172a;
	--nt-fg-footer: #ffffff;

	/* card: 白地 + 薄いスレートのボーダー + 静かな hover shadow */
	--nt-card-bg: #ffffff;
	--nt-card-border: #e2e8f0;
	--nt-card-hover-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);

	/* button: 控えめだが押し心地のあるスレート影 */
	--nt-button-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

/* ---------- friendly (親しみ系・教育系・シニア向け) ----------
   コンセプト:
   - 生成り / 淡いベージュの背景でやわらかく
   - 落ち着いた緑の primary、温かいオレンジの accent
   - 丸ゴシック寄りのシステムフォントスタック (Web フォントは導入しない)
   - 大きめの角丸とふっくらした影で押し心地のある印象に
   - hover 演出は控えめ
*/

body.nt-preset-friendly {
	/* ----- surfaces ----- */
	--nt-color-bg: #fffaf3;        /* 生成り */
	--nt-color-surface: #fff2e2;   /* 淡いベージュ */
	--nt-color-text: #2b1d12;
	--nt-color-muted: #8a6f56;
	--nt-color-border: #f1e3cf;

	/* ----- role colors -----
	   primary: 落ち着いたグリーン (CTA以外の操作色)
	   accent : 温かいオレンジ (CTA系で目を引く色)
	   secondary: ダークブラウン (フッター用) */
	--nt-color-primary: #5d8a4f;
	--nt-color-primary-contrast: #ffffff;
	--nt-color-secondary: #4f3a25;
	--nt-color-secondary-contrast: #fffaf3;
	--nt-color-accent: #ef8a3d;
	--nt-color-accent-contrast: #ffffff;

	/* ----- typography ----- */
	--nt-font-heading: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
	--nt-heading-letter-spacing: 0;

	/* ----- shape: 角丸大きめ ----- */
	--nt-radius-sm: 12px;
	--nt-radius-md: 22px;
	--nt-radius-lg: 32px;

	/* ----- shadows: あたたかくやわらかく ----- */
	--nt-shadow-sm: 0 4px 14px rgba(120, 80, 40, 0.08);
	--nt-shadow-md: 0 18px 40px rgba(120, 80, 40, 0.12);
	--nt-shadow-lg: 0 28px 60px rgba(120, 80, 40, 0.18);

	/* ----- role surfaces ----- */
	--nt-bg-hero: linear-gradient(180deg, #fff2e2 0%, #fffaf3 100%);
	--nt-hero-decoration-opacity: 0.5;

	--nt-bg-cta: linear-gradient(135deg, #ef8a3d 0%, #f3a35d 100%);
	--nt-fg-cta: #ffffff;

	--nt-bg-footer: #4f3a25;
	--nt-fg-footer: #fff2e2;

	--nt-card-bg: #ffffff;
	--nt-card-border: #f1e3cf;
	--nt-card-hover-shadow: 0 22px 48px rgba(120, 80, 40, 0.16);

	/* ボタンに押し心地のある影 */
	--nt-button-shadow: 0 6px 14px rgba(120, 80, 40, 0.18);
}

/* ---------- tech (AI / SaaS / プラグイン販売 / BtoB ツール) ----------
   コンセプト:
   - 白〜薄ブルーグレーの清潔感ある背景
   - 信頼感のあるトラストブルー primary、爽やかなシアン accent
   - シャープな白カード + 青みのあるクリーンな影
   - Hero は淡いグリッド + 控えめなブルー/シアンのグロー (CSS のみ)
   - 過度なネオンや強い発光はしない (BtoB 向け)
   - フォントは system-ui のまま、letter-spacing をやや詰めてツール感を出す
*/

body.nt-preset-tech {
	/* ----- surfaces: わずかに青みのある白で清潔感 ----- */
	--nt-color-bg: #f8fbff;
	--nt-color-surface: #eef6ff;
	--nt-color-text: #0f172a;
	--nt-color-muted: #64748b;
	--nt-color-border: #dbeafe;

	/* ----- role colors: トラストブルー + シアンアクセント ----- */
	--nt-color-primary: #2563eb;
	--nt-color-primary-contrast: #ffffff;
	--nt-color-secondary: #0f172a;
	--nt-color-secondary-contrast: #ffffff;
	--nt-color-accent: #06b6d4;
	--nt-color-accent-contrast: #042f3a;

	/* ----- typography: BtoB ツール感のあるタイトな字間 ----- */
	--nt-heading-letter-spacing: -0.022em;

	/* ----- radii: corporate より大きく、friendly より控えめ ----- */
	--nt-radius-sm: 8px;
	--nt-radius-md: 14px;
	--nt-radius-lg: 22px;

	/* ----- shadows: 青みのあるクリーンな影 ----- */
	--nt-shadow-sm: 0 4px 14px rgba(37, 99, 235, 0.08);
	--nt-shadow-md: 0 14px 32px rgba(37, 99, 235, 0.14);
	--nt-shadow-lg: 0 24px 56px rgba(37, 99, 235, 0.18);

	/* ----- role surfaces -----
	   hero: 多層グラデーションで「グリッド + 控えめなグロー」を CSS のみで表現。
	         ::before の accent ブロブ (右上) と重ならないよう左下に primary グロー。 */
	--nt-bg-hero:
		radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.14) 0%, transparent 55%),
		radial-gradient(circle at 50% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 65%),
		linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
	--nt-hero-decoration-opacity: 0.45;

	/* CTA: 信頼ブルー → シアンの製品サイト風グラデーション */
	--nt-bg-cta: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	--nt-fg-cta: #ffffff;

	/* footer: 濃紺地 + やや明るいスレートグレー文字 */
	--nt-bg-footer: #0f172a;
	--nt-fg-footer: #e2e8f0;

	/* card: 白地 + 薄ブルーのボーダー + 青み hover shadow */
	--nt-card-bg: #ffffff;
	--nt-card-border: #dbeafe;
	--nt-card-hover-shadow: 0 18px 40px rgba(37, 99, 235, 0.18);

	/* button: 先進的な印象のクリーンな青影 */
	--nt-button-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

/* ---------- dark (Muledge / 音楽ラウンジ / 高級ブランド / 映像系) ----------
   コンセプト:
   - 黒〜深いチャコールに上品なゴールド primary、深いパープル accent
   - テキストは白すぎない温かいオフホワイト (#f5efe4)
   - Hero はラウンジ照明のような薄いゴールド × パープルのラジアル光
   - CTA は黒〜紫〜ブロンズの斜めグラデで高級感
   - Card はチャコール + 金の薄い縁
   - Footer は黒地 + 温かいクリームゴールド文字 (ヴィンテージレコード感)
   - 見出しは serif 寄りシステムフォントスタックで上質に (Web フォント不使用)
   - 過度なネオン・赤すぎる演出・ホラー感は避ける
   - 落ち着いた音楽ラウンジ感を優先
*/

body.nt-preset-dark {
	/* ----- surfaces: 深い黒 + 暖チャコール ----- */
	--nt-color-bg: #08070b;
	--nt-color-surface: #111018;
	--nt-color-text: #f5efe4;        /* 温かいオフホワイト */
	--nt-color-muted: #b7a99b;       /* 温かいベージュグレー */
	--nt-color-border: rgba(201, 164, 76, 0.28); /* 金タイント */

	/* ----- role colors: 上品なゴールド + 深いパープル ----- */
	--nt-color-primary: #c9a44c;
	--nt-color-primary-contrast: #111018;
	--nt-color-secondary: #15121c;
	--nt-color-secondary-contrast: #f5efe4;
	--nt-color-accent: #7c3aed;
	--nt-color-accent-contrast: #ffffff;

	/* ----- typography: serif 寄りシステムスタック、字間に余裕 ----- */
	--nt-font-heading: Georgia, "Times New Roman", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--nt-heading-letter-spacing: 0.01em;

	/* ----- radii: ほどよく、丸すぎない ----- */
	--nt-radius-sm: 8px;
	--nt-radius-md: 16px;
	--nt-radius-lg: 24px;

	/* ----- shadows: 深い黒影 ----- */
	--nt-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.55);
	--nt-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.65);
	--nt-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.75);

	/* ----- role surfaces -----
	   hero: ラウンジ照明 — 左上に薄ゴールド・右下に深パープルのラジアル光をチャコールに重ねる */
	--nt-bg-hero:
		radial-gradient(ellipse at 15% 20%, rgba(201, 164, 76, 0.18) 0%, transparent 55%),
		radial-gradient(ellipse at 85% 80%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
		linear-gradient(180deg, #111018 0%, #08070b 100%);
	--nt-hero-decoration-opacity: 0.35;

	/* CTA: 黒 → パープル → ブロンズの斜めグラデで高級感。中の accent ボタン (パープル) が浮き出る */
	--nt-bg-cta: linear-gradient(135deg, #08070b 0%, #2d1b4e 50%, #4a3818 100%);
	--nt-fg-cta: #f5efe4;

	/* footer: 純黒 + 温かいクリームゴールド文字 (ヴィンテージレコード感) */
	--nt-bg-footer: #000000;
	--nt-fg-footer: #e8d9b6;

	/* card: 深いチャコール + 金の薄い縁 + 金タイントの hover shadow */
	--nt-card-bg: #15121c;
	--nt-card-border: rgba(201, 164, 76, 0.28);
	--nt-card-hover-shadow: 0 20px 44px rgba(201, 164, 76, 0.14);

	/* button: ゴールドタイントのソフトな影で高級な押し心地 */
	--nt-button-shadow: 0 4px 14px rgba(201, 164, 76, 0.22);
}

/* ---------- dark: ボタン hover/focus テキストの可読性確保 ----------
   原因:
   02-base.css の `a:hover { color: var(--nt-color-secondary); }` がカスケードし、
   `.nt-btn--ghost:hover` / `.nt-btn--accent:hover` のように color を再宣言していない
   バリエーションでは hover 時の文字色が --nt-color-secondary に置き換わる。
   Dark プリセットでは --nt-color-secondary が #15121c（極端に暗い色）で、
   ghost の hover 背景 (--nt-color-surface = #111018) や accent (#7c3aed) と組み合わさると
   ボタン内のラベルが見えなくなる。

   対策:
   Dark プリセット限定で、各バリエーションの hover/focus-visible 時の color を明示。
   他プリセット (corporate / friendly / tech) には影響しない。
*/

body.nt-preset-dark .nt-btn:hover,
body.nt-preset-dark .nt-btn:focus-visible {
	color: var(--nt-color-text);
}

body.nt-preset-dark .nt-btn--primary:hover,
body.nt-preset-dark .nt-btn--primary:focus-visible {
	color: var(--nt-color-primary-contrast);
}

body.nt-preset-dark .nt-btn--secondary:hover,
body.nt-preset-dark .nt-btn--secondary:focus-visible {
	color: var(--nt-color-secondary-contrast);
}

body.nt-preset-dark .nt-btn--accent:hover,
body.nt-preset-dark .nt-btn--accent:focus-visible {
	color: var(--nt-color-accent-contrast);
}

/* ---------- dark CTA: ボタンを accent (パープル) ではなく primary (ゴールド) で固定 ----------
   CTA 背景が黒→紫→ブロンズなので、デフォルトの紫アクセントボタンが背景に埋もれがち。
   ゴールド primary に切り替えて、通常時・hover/focus-visible・visited 全状態で
   濃色のラベルが確実に読める設計に揃える。
*/

body.nt-preset-dark .nt-cta .nt-btn,
body.nt-preset-dark .nt-cta .nt-btn:visited {
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	border-color: var(--nt-color-primary);
}

body.nt-preset-dark .nt-cta .nt-btn:hover,
body.nt-preset-dark .nt-cta .nt-btn:focus-visible {
	background: #d8b967;
	color: var(--nt-color-primary-contrast);
	border-color: #d8b967;
}