/**
 * css/foundation/base.css
 * ============================================================
 * A LEGEND 2：Base
 * ============================================================
 *
 * 役割：
 * - body、リンク、選択色、基本背景などサイト全体の基礎表示を定義します。
 * - 具体的なページレイアウトやコンポーネント装飾は別CSSへ分離します。
 *
 * 今回の改修：
 * - 固定ダーク前提の背景グロー色を、tokens.css の semantic token へ接続します。
 * - design.background.glow / grain / vignette / grid_lines を body class で制御できるようにします。
 * - link / selection / code / pre などの基礎色を Design Token 経由へ寄せます。
 * - 既存クラス名・既存セレクタは維持し、テーマ全体の土台だけを設定連動にします。
 */

/* ------------------------------------------------------------
 * Document base
 * ------------------------------------------------------------
 *
 * html はブラウザの外側まで背景色が見える場面があるため、
 * body と同じ背景基準色を指定します。
 */
html {
	background: var(--aleg2-color-bg);
}

/* ------------------------------------------------------------
 * Body
 * ------------------------------------------------------------
 *
 * body は全ページ共通の背景・文字・フォント基盤です。
 *
 * 重要：
 * - 背景色は design.colors.bg → --aleg2-color-bg を参照します。
 * - グロー色は固定 rgba ではなく --aleg2-glow-* を参照します。
 * - グロー表示のON/OFFは body.aleg2-bg-glow で制御します。
 */
body {
	min-width: 320px;
	color: var(--aleg2-color-text);
	font-family: var(--aleg2-font-sans);
	font-size: var(--aleg2-font-size-md);
	line-height: var(--aleg2-line-height-body);
	letter-spacing: 0.01em;
	background: var(--aleg2-color-bg);
	overflow-x: hidden;
}

/**
 * 背景グローON時。
 *
 * design.background.glow が有効な場合、
 * inc/core/utilities.php 側で body に .aleg2-bg-glow が付与されます。
 * 固定色ではなく tokens.css の --aleg2-glow-* を使うことで、
 * ライト/ダーク両方のプリセットに追従します。
 */
body.aleg2-bg-glow {
	background:
		radial-gradient(circle at 20% 0%, var(--aleg2-glow-primary), transparent 34vw),
		radial-gradient(circle at 86% 12%, var(--aleg2-glow-secondary), transparent 32vw),
		var(--aleg2-color-bg);
}

/**
 * 背景グローOFF時。
 *
 * 明示的に .aleg2-bg-glow が無い場合は、純粋な背景色だけを使います。
 * これにより design.background.glow = 0 がフロント全体へ反映されます。
 */
body:not(.aleg2-bg-glow) {
	background: var(--aleg2-color-bg);
}

/**
 * 背景装飾レイヤー。
 *
 * grain / vignette / grid_lines は、body::before / body::after を使って
 * 全ページ共通の薄い装飾として扱います。
 *
 * 注意：
 * - pointer-events: none にして操作を妨げません。
 * - z-index は0にし、実コンテンツは .aleg2-site / .aleg2-main 側で前面に出します。
 * - ここでは強い装飾を避け、各ページCSS側の世界観を邪魔しない薄さにします。
 */
body::before,
body::after {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
}

/**
 * grain / grid_lines 用レイヤー。
 *
 * grain：
 * - ごく薄い粒状感をradial-gradientで表現します。
 *
 * grid_lines：
 * - linear-gradientで細い線を重ねます。
 *
 * どちらも body class がある場合のみ有効化します。
 */
body::before {
	opacity: 0;
	background: none;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

body.aleg2-bg-grain::before {
	opacity: 0.18;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
	background-size: 4px 4px;
	mix-blend-mode: soft-light;
}

body.aleg2-bg-grid-lines::before {
	opacity: 0.18;
	background-image:
		linear-gradient(to right, var(--aleg2-color-border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--aleg2-color-border) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
}

/**
 * grain と grid_lines が同時にONの場合。
 *
 * 片方だけを上書きしないよう、背景画像を重ねて扱います。
 */
body.aleg2-bg-grain.aleg2-bg-grid-lines::before {
	opacity: 0.16;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0),
		linear-gradient(to right, var(--aleg2-color-border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--aleg2-color-border) 1px, transparent 1px);
	background-size:
		4px 4px,
		72px 72px,
		72px 72px;
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
	mix-blend-mode: soft-light;
}

/**
 * vignette 用レイヤー。
 *
 * design.background.vignette が有効な場合のみ、
 * 画面外周へごく薄い陰影を付けます。
 *
 * 固定の黒ベタではなく overlay token を使うことで、
 * 将来的にプリセット別に調整しやすくします。
 */
body::after {
	opacity: 0;
	background:
		radial-gradient(circle at 50% 40%, transparent 0, transparent 48%, var(--aleg2-overlay-soft) 100%);
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

body.aleg2-bg-vignette::after {
	opacity: 0.36;
}

/* ------------------------------------------------------------
 * Admin bar offset
 * ------------------------------------------------------------
 *
 * WordPress管理バー表示時は固定ヘッダーを下げます。
 * 既存挙動を維持します。
 */
body.admin-bar .aleg2-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .aleg2-site-header {
		top: 46px;
	}
}

/* ------------------------------------------------------------
 * Selection
 * ------------------------------------------------------------
 *
 * 選択色は primary と on-primary を使用します。
 * これによりライト/ダークの両方で視認性を確保しやすくします。
 */
::selection {
	color: var(--aleg2-color-on-primary);
	background: var(--aleg2-color-primary);
}

/* ------------------------------------------------------------
 * Links
 * ------------------------------------------------------------
 *
 * link / link_hover 設定を反映するため、
 * primary / accent 固定ではなく link token を参照します。
 */
a {
	color: var(--aleg2-color-link);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

a:hover {
	color: var(--aleg2-color-link-hover);
}

/* ------------------------------------------------------------
 * Text elements
 * ------------------------------------------------------------
 *
 * 既存の余白・太字・小文字設定は維持します。
 */
p {
	margin-top: 0;
	margin-bottom: 1.35em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--aleg2-font-size-sm);
}

/* ------------------------------------------------------------
 * Code elements
 * ------------------------------------------------------------
 *
 * code / pre は固定の黒・白背景ではなく、surface / border token へ寄せます。
 * これによりライト系プリセットでも背景が暗すぎる事故を避けます。
 */
code,
kbd,
samp,
pre {
	font-family: var(--aleg2-font-mono);
}

pre {
	max-width: 100%;
	padding: var(--aleg2-space-5);
	overflow: auto;
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-md);
	box-shadow: var(--aleg2-shadow-soft);
}

code {
	padding: 0.12em 0.32em;
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-xs);
}

pre code {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------
 * Horizontal rule
 * ------------------------------------------------------------
 *
 * 区切り線はborder tokenを利用します。
 */
hr {
	height: 1px;
	margin: var(--aleg2-space-12) 0;
	background: var(--aleg2-color-border);
	border: 0;
}

/* ------------------------------------------------------------
 * Site wrappers
 * ------------------------------------------------------------
 *
 * body::before / body::after の背景装飾より前面に出るよう、
 * サイト全体のwrapperへ明示的にz-indexを持たせます。
 */
.aleg2-site {
	position: relative;
	z-index: var(--aleg2-z-base);
	min-height: 100vh;
	overflow: clip;
}

.aleg2-main {
	position: relative;
	z-index: var(--aleg2-z-base);
}

/* ------------------------------------------------------------
 * Entry content
 * ------------------------------------------------------------
 *
 * 投稿本文・固定ページ本文の基礎色をDesign Tokenへ接続します。
 * 詳細な本文タイポグラフィは typography.css / single.css 側で扱います。
 */
.aleg2-entry-content {
	color: var(--aleg2-color-text);
}

.aleg2-entry-content a {
	color: var(--aleg2-color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.aleg2-entry-content a:hover {
	color: var(--aleg2-color-link-hover);
}

.aleg2-entry-content img {
	border-radius: var(--aleg2-radius-media);
}

.aleg2-entry-content iframe,
.aleg2-entry-content video {
	border-radius: var(--aleg2-radius-media);
}