/* =========================================================
   02-base.css
   タイポグラフィと基本要素のベーススタイル。
   ========================================================= */

html {
	font-family: var(--nt-font-base);
	font-size: 16px;
	line-height: 1.7;
	color: var(--nt-color-text);
	background: var(--nt-color-bg);
}

body {
	font-family: var(--nt-font-base);
	color: var(--nt-color-text);
	background: var(--nt-color-bg);
	font-size: var(--nt-fs-base);
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nt-font-heading);
	color: var(--nt-color-text);
	letter-spacing: var(--nt-heading-letter-spacing);
}

h1 { font-size: var(--nt-fs-3xl); line-height: 1.3; }
h2 { font-size: var(--nt-fs-2xl); line-height: 1.35; }
h3 { font-size: var(--nt-fs-xl);  line-height: 1.4;  }
h4 { font-size: var(--nt-fs-lg);  line-height: 1.45; }
h5 { font-size: var(--nt-fs-md);  line-height: 1.5;  }
h6 { font-size: var(--nt-fs-base); line-height: 1.5; }

a {
	color: var(--nt-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--nt-transition);
}

a:hover {
	color: var(--nt-color-secondary);
}

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

strong, b {
	font-weight: 700;
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.95em;
}

code {
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-sm);
	padding: 0.1em 0.4em;
}

pre {
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-md);
	padding: 1em 1.25em;
	overflow-x: auto;
	line-height: 1.6;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
}

blockquote {
	border-left: 4px solid var(--nt-color-primary);
	background: var(--nt-color-surface);
	padding: 1em 1.25em;
	margin: 1.5em 0;
	border-radius: 0 var(--nt-radius-md) var(--nt-radius-md) 0;
	color: var(--nt-color-muted);
}

table {
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-sm);
	overflow: hidden;
}

th, td {
	border: 1px solid var(--nt-color-border);
	padding: 0.6em 0.8em;
	text-align: left;
}

th {
	background: var(--nt-color-surface);
	font-weight: 700;
}

input,
textarea,
select {
	width: 100%;
	max-width: 100%;
	background: var(--nt-color-bg);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-sm);
	padding: 0.6em 0.8em;
	transition: border-color var(--nt-transition), box-shadow var(--nt-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--nt-color-primary);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt-color-primary) 25%, transparent);
}

::selection {
	background: color-mix(in srgb, var(--nt-color-primary) 25%, transparent);
}