/* =========================================================
   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);
}

/* Hover: tactile primary-tinted darken/lighten that works on every preset.
   Mixing 70 % primary with 30 % --nt-color-text means:
     - light presets (corporate / friendly / tech): primary becomes slightly
       darker by absorbing some near-black body text → readable "press" cue
     - dark preset: gold primary picks up cream-white body text → BRIGHTER
       gold, never collapses to near-black like the previous
       --nt-color-secondary did (which on dark = #15121c, effectively
       invisible against #08070b body bg)
   Components that need a different hover (header menu, cards, footer links,
   share buttons, TOC, breadcrumbs, etc.) keep their explicit class-scoped
   :hover rules — those have higher specificity and override this default. */
a:hover {
	color: color-mix(in srgb, var(--nt-color-primary) 70%, var(--nt-color-text));
}

/* Global keyboard focus ring for in-content links. Components with their
   own focus-visible style (buttons, share links, TOC links, back-to-top,
   pagination cells) have class-scoped focus-visible at higher specificity,
   so this base rule does not override them — it just guarantees that any
   stray <a> in body content (the_content output, sidebar links, comment
   metadata, etc.) shows a visible focus indicator on tab navigation. */
a:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

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;
}

/* Framed field styling for text-like inputs, textareas and selects.
   The :not() chain keeps the rule from clobbering inputs that need to
   keep their native widget — most importantly checkboxes and radios,
   which would otherwise expand to 100% width and shove their sibling
   labels onto a new line (the cause of CF7 acceptance / WP comment
   consent checkbox layout breakage). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
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:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]):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);
}