/**
 * SignalMind — Base
 *
 * Element-level defaults and the typographic system. Everything here composes
 * from tokens.css; no literal values.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Document
   ========================================================================== */

html {
	font-size: 100%;
	scroll-behavior: smooth;
	/* Anchors clear the sticky header instead of hiding beneath it. */
	scroll-padding-top: calc(var(--sm-header-height) + var(--sm-space-6));
	background-color: var(--sm-color-bg);
}

body {
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--sm-color-bg);
	color: var(--sm-color-text);
	font-family: var(--sm-font-sans);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-regular);
	line-height: var(--sm-leading-relaxed);
	letter-spacing: var(--sm-tracking-snug);
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
	font-variant-ligatures: contextual common-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Locked by the mobile navigation and any future modal surface. */
body.is-scroll-locked {
	overflow: hidden;
	touch-action: none;
}

::selection {
	background-color: var(--sm-color-selection-bg);
	color: var(--sm-color-selection-text);
	text-shadow: none;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sm-font-display);
	color: var(--sm-color-text);
	font-weight: var(--sm-weight-bold);
	line-height: var(--sm-leading-tight);
	letter-spacing: var(--sm-tracking-tight);
}

h1 {
	font-size: var(--sm-text-h1);
	font-weight: var(--sm-weight-extrabold);
	letter-spacing: var(--sm-tracking-tighter);
}

h2 {
	font-size: var(--sm-text-h2);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-tight);
}

h3 {
	font-size: var(--sm-text-h3);
}

h4 {
	font-size: var(--sm-text-h4);
	line-height: var(--sm-leading-snug);
}

h5 {
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-semibold);
	line-height: var(--sm-leading-snug);
	letter-spacing: var(--sm-tracking-snug);
}

/* h6 is a plain 16px heading, not an eyebrow. Use `.sm-eyebrow` for the
   uppercase micro-label — it is a style, not a level in the outline. */
h6 {
	font-size: var(--sm-text-h6);
	font-weight: var(--sm-weight-semibold);
	line-height: var(--sm-leading-normal);
	letter-spacing: var(--sm-tracking-snug);
}

/* ==========================================================================
   Text
   ========================================================================== */

p,
li {
	font-size: var(--sm-text-body);
}

p {
	color: var(--sm-color-text-secondary);
}

strong,
b {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

em,
i {
	font-style: italic;
}

small {
	font-size: var(--sm-text-sm);
	color: var(--sm-color-text-muted);
}

mark {
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	padding: 0 var(--sm-space-1);
	border-radius: var(--sm-radius-xs);
}

del {
	color: var(--sm-color-text-subtle);
	text-decoration-thickness: 1px;
}

ins {
	color: var(--sm-color-primary);
	text-decoration: none;
}

abbr[title] {
	text-decoration-color: var(--sm-color-text-subtle);
}

hr {
	border-top: var(--sm-border-width) solid var(--sm-color-divider);
	margin-block: var(--sm-space-10);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
	color: var(--sm-color-text-link);
	transition: var(--sm-transition-colors);
}

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

/* Underlines belong to running prose only. Scoping them here rather than to a
   bare `a:not([class])` keeps card titles, meta rows and widget lists clean
   without every one of them having to opt out. */
.sm-prose a:not([class]),
.sm-entry__content a:not([class]),
.comment-content a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--sm-alpha-primary-40);
}

.sm-prose a:not([class]):hover,
.sm-entry__content a:not([class]):hover,
.comment-content a:not([class]):hover {
	text-decoration-color: currentColor;
}

/* ==========================================================================
   Focus
   A single visible ring for keyboard users across every focusable element.
   ========================================================================== */

:focus {
	outline: none;
}

:focus-visible {
	outline: var(--sm-border-width-thick) solid var(--sm-color-focus);
	outline-offset: var(--sm-space-0-5);
	border-radius: var(--sm-radius-xs);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul:not([class]),
ol:not([class]) {
	padding-left: var(--sm-space-6);
	color: var(--sm-color-text-secondary);
}

ul:not([class]) {
	list-style: disc;
}

ol:not([class]) {
	list-style: decimal;
}

ul:not([class])::marker,
li::marker {
	color: var(--sm-color-primary);
}

li + li {
	margin-top: var(--sm-space-2);
}

li > ul,
li > ol {
	margin-top: var(--sm-space-2);
}

dt {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

dd {
	color: var(--sm-color-text-muted);
	margin-bottom: var(--sm-space-3);
}

/* ==========================================================================
   Quotes
   ========================================================================== */

blockquote {
	position: relative;
	padding-left: var(--sm-space-6);
	border-left: var(--sm-border-width-thick) solid var(--sm-color-primary);
	font-size: var(--sm-text-lg);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text);
}

blockquote cite,
cite {
	display: inline-block;
	font-size: var(--sm-text-sm);
	font-style: normal;
	color: var(--sm-color-text-muted);
	letter-spacing: var(--sm-tracking-wide);
}

/* ==========================================================================
   Code
   ========================================================================== */

code,
kbd,
samp,
pre,
tt,
var {
	font-family: var(--sm-font-mono);
	font-feature-settings: "liga" 0, "calt" 1;
	font-variant-numeric: tabular-nums;
}

code {
	font-size: 0.875em;
	background-color: var(--sm-alpha-white-6);
	border: var(--sm-border-width) solid var(--sm-color-border-subtle);
	border-radius: var(--sm-radius-xs);
	padding: 0.15em 0.4em;
	color: var(--sm-color-primary-hover);
	word-break: break-word;
}

pre {
	background-color: var(--sm-color-surface);
	border: var(--sm-border-width) solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-5);
	overflow-x: auto;
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-secondary);
	box-shadow: var(--sm-shadow-inner);
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

kbd {
	font-size: var(--sm-text-xs);
	background-color: var(--sm-color-surface-raised);
	border: var(--sm-border-width) solid var(--sm-color-border-strong);
	border-bottom-width: var(--sm-border-width-thick);
	border-radius: var(--sm-radius-sm);
	padding: 0.15em 0.45em;
	color: var(--sm-color-text);
}

/* ==========================================================================
   Media
   ========================================================================== */

img,
video {
	border-radius: var(--sm-radius-md);
}

figure {
	margin: 0;
}

figcaption {
	margin-top: var(--sm-space-3);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-text-muted);
	text-align: center;
}

iframe {
	border: 0;
	max-width: 100%;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
	width: 100%;
	font-size: var(--sm-text-sm);
	font-variant-numeric: tabular-nums;
	border: var(--sm-border-width) solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	overflow: hidden;
}

caption {
	caption-side: bottom;
	padding-top: var(--sm-space-3);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-text-muted);
	text-align: left;
}

th,
td {
	padding: var(--sm-space-3) var(--sm-space-4);
	text-align: left;
	border-bottom: var(--sm-border-width) solid var(--sm-color-divider);
}

th {
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wider);
	text-transform: uppercase;
	color: var(--sm-color-text-muted);
	background-color: var(--sm-alpha-white-2);
}

td {
	color: var(--sm-color-text-secondary);
}

tbody tr:last-child th,
tbody tr:last-child td {
	border-bottom: 0;
}

/* ==========================================================================
   Forms — element defaults. Styled controls live in components.css.
   ========================================================================== */

label {
	display: inline-block;
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-secondary);
}

::placeholder {
	color: var(--sm-color-field-placeholder);
	opacity: 1;
}

/* Keep autofilled fields on the dark surface instead of the UA's white wash. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--sm-color-text);
	-webkit-box-shadow: 0 0 0 1000px var(--sm-color-surface-raised) inset;
	caret-color: var(--sm-color-text);
	transition: background-color 100000s ease-in-out 0s;
}

progress {
	accent-color: var(--sm-color-primary);
}

::marker {
	color: var(--sm-color-text-muted);
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

@supports (scrollbar-width: thin) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--sm-alpha-white-16) transparent;
	}
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--sm-alpha-white-12);
	border-radius: var(--sm-radius-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--sm-alpha-white-24);
}