/* --- 1. Generative Design Engine --- */
:root {
	--base-primary: #757dd4;

	/* Mode Specific Config */
	--bg-l: 0.98;
	--text-main-l: 0.1;
	--text-head-l: 0.25;
	--block-mod: -0.04;

	@media (prefers-color-scheme: dark) {
		--bg-l: 0.12;
		--text-main-l: 0.95;
		--text-head-l: 0.85;
		--block-mod: 0.06;
	}

	/* Math Driven Semantic Colors */
	--bg-page: oklch(from var(--base-primary) var(--bg-l) calc(c * 0.3) h);
	--text-main: oklch(from var(--base-primary) var(--text-main-l) calc(c * 0.05) h);
	--text-heading: oklch(from var(--base-primary) var(--text-head-l) calc(c * 0.8) h);
	--bg-block: oklch(from var(--bg-page) calc(l + var(--block-mod)) c h);

	/* Functional Colors */
	--brand: var(--base-primary);
	--brand-text: oklch(from var(--brand) calc(l > 0.6 ? 0.1 : 0.98) 0.02 h);

	/* Layout Specs */
	--space-block: clamp(1.25rem, 4vw, 2.5rem);
	--max-width: 980px;
}

/* --- 2. Global & Selection --- */
::selection {
	background-color: oklch(from var(--brand) l c h / 0.2);
	color: inherit;
}

body {
	background-color: var(--bg-page);
	color: var(--text-main);
	line-height: 1.85;
	letter-spacing: 0.04em;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: calc(var(--space-block) * 2) var(--space-block);
	box-sizing: border-box;
}

hr {
	border: none;
	border-top: 1px solid oklch(from var(--text-main) l c h / 0.1);
	margin: var(--space-block) 0;
}

/* --- 3. Typography & Links --- */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-heading);
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: var(--space-block);
}

h1,
h2,
h3 {
	font-weight: 800;
	letter-spacing: 0.03em;
}

/* 本文やリスト、ブロック要素の後に見出しが続く場合のみ、上に余白を作る */
:is(p, ul, ol, table, blockquote, img, header)+ :is(h2, h3, h4, h5, h6) {
	margin-top: var(--space-block);
	/* 下マージンより広めにとることでセクションの区切りを強調 */
}

header {
	margin-bottom: calc(var(--space-block) * 0.8);
}

/* header内の見出しは、ページ最上部に来ることが多いため上マージンを0に固定 */
header :is(h1, h2, h3) {
	margin-top: 0;
	margin-bottom: 1rem;
	/* サブタイトルなどがある場合を想定して少しだけ開ける */
}

footer {
	margin-top: calc(var(--space-block));
}

nav {
	margin-bottom: var(--space-block);
}

/* nav 内のリストは余白をリセット */
nav :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* nav 内のリンクを少しボタンっぽく、あるいは押しやすくする */
nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95em;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;

	&:hover {
		background-color: oklch(from var(--brand) l c h / 0.1);
	}
}

p {
	margin-top: 0;
	margin-bottom: calc(var(--space-block) * 0.6);
	/* 1.5rem 程度 */
}

img,
video,
canvas {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: var(--space-block) 0;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: oklch(from var(--brand) l c h / 0.4);
	text-underline-offset: 0.25em;
	transition: 0.2s ease;

	&:hover {
		color: var(--brand);
		text-decoration-color: var(--brand);
	}
}

/* --- 4. Interactive Elements --- */

form {
	display: contents;
}

article,
section,
fieldset {
	background-color: var(--bg-block);
	border: 1px solid oklch(from var(--text-main) l c h / 0.1);
	padding: calc(var(--space-block) * 1) calc(var(--space-block) * 0.66) calc(var(--space-block) * 1.05);
	border-radius: 12px;
	margin: var(--space-block) 0;
}

article :last-child,
section :last-child,
fieldset :last-child {
	margin-bottom: 0;
}

section {
	section {
		margin-top: 0;
	}
}

aside {
	color: oklch(from var(--text-main) l c h / 0.6);
	font-size: .9em;
}

blockquote {
	margin: var(--space-block) 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--brand);
	color: oklch(from var(--text-main) l c h / 0.8);
	font-style: normal;
}

ul,
ol {
	margin: calc(var(--space-block) * .8) 0;

	li {
		margin: .66em 0;
	}
}

button,
[type="submit"] {
	background-color: var(--brand);
	color: var(--brand-text);
	border: none;
	padding: 0.7rem 1.4rem;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	&:hover {
		background-color: oklch(from var(--brand) calc(l + 0.05) c h);
		transform: translateY(-1px);
		box-shadow: 0 4px 15px oklch(from var(--brand) l c h / 0.25);
	}

	&:active {
		background-color: oklch(from var(--brand) calc(l - 0.05) c h);
		transform: translateY(0);
	}
}

input,
textarea,
select {
	background-color: var(--bg-page);
	color: inherit;
	border: 1px solid oklch(from var(--text-main) l c h / 0.2);
	padding: 0.6rem;
	border-radius: 8px;

	&:focus {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}
}

/* --- 5. Data Visualization --- */
table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-block) 0;
	font-size: 0.95rem;
	background-color: var(--bg-block);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid oklch(from var(--text-main) l c h / 0.1);

	th,
	td {
		padding: 1rem;
		text-align: left;
		border-bottom: 1px solid oklch(from var(--text-main) l c h / 0.05);
	}

	th {
		background-color: oklch(from var(--brand) l c h / 0.05);
		color: var(--text-heading);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 0.85rem;
	}

	tr {
		&:last-child td {
			border-bottom: none;
		}

		&:nth-child(even) {
			background-color: oklch(from var(--text-main) l c h / 0.02);
		}

		&:hover {
			background-color: oklch(from var(--brand) l c h / 0.04);
		}
	}
}