/*!
 * WP-AIsets DarkTech - Core
 *
 * Neon-tech, AI-inspired visual system (Creativio AI style).
 * Defines global tokens, resets, typography, and the animated grid background.
 *
 * This layer must remain neutral with regard to any specific page builder.
 */

:root {
	/* Color system */
	--dt-bg: #0a0a0f; /* deep black-blue */
	--dt-surface: #11121a; /* default surface panels */
	--dt-surface-elevated: #171824;
	--dt-surface-soft: #0f1018;
	--dt-primary: #4c8cff; /* electric blue */
	--dt-secondary: #9a4cff; /* violet */
	--dt-accent: #00ffc8; /* cyber mint */
	--dt-text-primary: #ffffff;
	--dt-text-secondary: #a8b2d1;
	--dt-border-subtle: rgba(168, 178, 209, 0.25);
	--dt-border-strong: rgba(168, 178, 209, 0.45);

	/* Glows & overlays */
	--dt-glow-primary-soft: 0 0 28px rgba(76, 140, 255, 0.55);
	--dt-glow-accent-soft: 0 0 26px rgba(0, 255, 200, 0.45);
	--dt-glow-ambient: 0 18px 60px rgba(0, 0, 0, 0.85);

	/* Radii */
	--dt-radius-xs: 0.25rem;
	--dt-radius-sm: 0.5rem;
	--dt-radius-md: 0.9rem;
	--dt-radius-lg: 1.2rem;
	--dt-radius-pill: 999px;

	/* Spacing scale */
	--dt-space-2xs: 0.25rem;
	--dt-space-xs: 0.5rem;
	--dt-space-sm: 0.75rem;
	--dt-space-md: 1rem;
	--dt-space-lg: 1.5rem;
	--dt-space-xl: 2rem;
	--dt-space-2xl: 3rem;
	--dt-space-3xl: 4rem;

	/* Typography */
	--dt-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--dt-letter-tight: -0.04em;
	--dt-letter-wide: 0.22em;

	/* Motion */
	--dt-ease-fast: 160ms ease-out;
	--dt-ease-med: 230ms ease;
	--dt-ease-slow: 380ms ease;

	/* Shadows */
	--dt-shadow-soft: 0 24px 60px rgba(3, 6, 23, 0.95);
}

/* Reset and base elements */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	text-size-adjust: 100%;
	font-size: calc(16px * var(--dt-type-scale, 1));
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--dt-font-sans);
	line-height: 1.7;
	color: var(--dt-text-primary);
	background-color: var(--dt-bg);
	/* Layered neon grid + radial washes */
	background-image:
		/* soft radial washes */
		radial-gradient(circle at 0% 0%, rgba(76, 140, 255, 0.26) 0, transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(154, 76, 255, 0.24) 0, transparent 55%),
		/* subtle animated grid */
		linear-gradient(rgba(76, 140, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(154, 76, 255, 0.08) 1px, transparent 1px);
	background-size:
		100% 100%,
		100% 100%,
		72px 72px,
		72px 72px;
	background-position:
		0 0,
		0 0,
		0 0,
		0 0;
	background-attachment: fixed;
	animation: dt-grid-pan 38s linear infinite;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

@keyframes dt-grid-pan {
	0% {
		background-position:
			0 0,
			0 0,
			0 0,
			0 0;
	}
	100% {
		background-position:
			0 0,
			0 0,
			72px 72px,
			-72px -72px;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-style: none;
}

a {
	color: var(--dt-primary);
	text-decoration: none;
	transition:
		color var(--dt-ease-fast),
		text-shadow var(--dt-ease-fast),
		box-shadow var(--dt-ease-fast);
}

a:hover,
a:focus-visible {
	color: var(--dt-accent);
	text-shadow: 0 0 14px rgba(0, 255, 200, 0.6);
	outline: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	background-color: transparent;
}

code,
pre,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

pre {
	padding: var(--dt-space-md) var(--dt-space-lg);
	border-radius: var(--dt-radius-md);
	background: radial-gradient(circle at top left, rgba(76, 140, 255, 0.22) 0, transparent 60%),
		linear-gradient(135deg, #11121a, #151628 55%, #14122c 100%);
	box-shadow: var(--dt-shadow-soft);
	overflow-x: auto;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.4em;
	font-family: var(--dt-font-sans);
	font-weight: 700;
	letter-spacing: var(--dt-letter-tight);
	color: var(--dt-text-primary);
}

h1 {
	font-size: clamp(2.4rem, 4vw, 3.2rem);
}

h2 {
	font-size: clamp(1.9rem, 3vw, 2.4rem);
}

h3 {
	font-size: clamp(1.5rem, 2.4vw, 1.8rem);
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.05rem;
}

h6 {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

p {
	margin: 0 0 1em;
	color: var(--dt-text-secondary);
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: 0.82em;
}

hr {
	border: 0;
	border-top: 1px solid var(--dt-border-subtle);
	margin: var(--dt-space-xl) 0;
}

/* Accessibility helpers */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 1rem 1.5rem;
	background: #11121a;
	color: #ffffff;
	border-radius: var(--dt-radius-sm);
	box-shadow: var(--dt-shadow-soft);
	z-index: 999;
}

/* Generic utility primitives (builder-safe) */

.dt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.25rem 0.7rem;
	border-radius: var(--dt-radius-pill);
	background: radial-gradient(circle at left, rgba(76, 140, 255, 0.7) 0, transparent 55%),
		rgba(10, 10, 15, 0.9);
	color: var(--dt-text-secondary);
	font-size: 0.72rem;
	letter-spacing: var(--dt-letter-wide);
	text-transform: uppercase;
}

.dt-gradient-text {
	background-image: linear-gradient(120deg, var(--dt-primary), var(--dt-secondary), var(--dt-accent));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.dt-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--dt-radius-pill);
	border: 1px solid rgba(168, 178, 209, 0.3);
	background: linear-gradient(135deg, rgba(17, 18, 26, 0.95), rgba(21, 22, 36, 0.98));
	color: var(--dt-text-secondary);
	font-size: 0.75rem;
}