/*
 * AXXIONIX PP-002 – Bricks Theme Foundation
 * Version 1.0.0
 *
 * Scope:
 * - Global browser normalization
 * - Fluid type and spacing
 * - Bricks-compatible containers, sections and grids
 * - Accessibility and reduced-motion defaults
 * - Dark premium surface primitives
 *
 * Naming convention:
 * --ax-*     Design tokens
 * .ax-*      Components/layout primitives
 * .u-*       Single-purpose utilities
 */

:root {
	/* Brand */
	--ax-green: #54B385;
	--ax-green-hover: #69C392;
	--ax-green-active: #419A71;
	--ax-green-rgb: 84, 179, 133;

	/* Backgrounds */
	--ax-dark: #071312;
	--ax-surface: #0B1B19;
	--ax-surface-2: #102623;
	--ax-surface-3: #15302C;

	/* Text */
	--ax-white: #FFFFFF;
	--ax-text: #F4F8F7;
	--ax-text-muted: #B8C8C4;
	--ax-text-soft: #92AAA4;

	/* Borders */
	--ax-border: rgba(255, 255, 255, 0.10);
	--ax-border-strong: rgba(255, 255, 255, 0.18);
	--ax-border-green: rgba(var(--ax-green-rgb), 0.42);

	/* Typography */
	--ax-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ax-text-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.875rem);
	--ax-text-sm: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
	--ax-text-base: clamp(1rem, 0.95rem + 0.20vw, 1.125rem);
	--ax-text-lg: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
	--ax-text-xl: clamp(1.35rem, 1.15rem + 0.78vw, 1.875rem);
	--ax-h4: clamp(1.55rem, 1.25rem + 1.10vw, 2.25rem);
	--ax-h3: clamp(1.9rem, 1.40rem + 1.75vw, 3rem);
	--ax-h2: clamp(2.35rem, 1.55rem + 2.65vw, 4.25rem);
	--ax-h1: clamp(3rem, 1.65rem + 4.55vw, 6.5rem);

	/* Layout */
	--ax-content-width: 80rem;
	--ax-reading-width: 52rem;
	--ax-gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);
	--ax-section-space: clamp(5rem, 3rem + 6vw, 10rem);
	--ax-section-space-sm: clamp(3.5rem, 2.5rem + 3vw, 6rem);

	/* Spacing */
	--ax-space-1: 0.25rem;
	--ax-space-2: 0.5rem;
	--ax-space-3: 0.75rem;
	--ax-space-4: 1rem;
	--ax-space-5: 1.25rem;
	--ax-space-6: 1.5rem;
	--ax-space-8: 2rem;
	--ax-space-10: 2.5rem;
	--ax-space-12: 3rem;
	--ax-space-16: 4rem;
	--ax-space-20: 5rem;
	--ax-space-24: 6rem;

	/* Radius */
	--ax-radius-sm: 0.5rem;
	--ax-radius-md: 0.875rem;
	--ax-radius-lg: 1.25rem;
	--ax-radius-xl: 1.75rem;
	--ax-radius-pill: 999px;

	/* Shadows */
	--ax-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
	--ax-shadow-md: 0 18px 55px rgba(0, 0, 0, 0.28);
	--ax-shadow-lg: 0 32px 100px rgba(0, 0, 0, 0.38);
	--ax-glow: 0 0 52px rgba(var(--ax-green-rgb), 0.23);

	/* Motion */
	--ax-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ax-fast: 160ms;
	--ax-normal: 280ms;
	--ax-slow: 600ms;

	/* Layering */
	--ax-z-header: 100;
	--ax-z-overlay: 500;
	--ax-z-modal: 1000;
}

/* Modern, conservative normalization */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body.axxionix-site {
	margin: 0;
	min-width: 20rem;
	overflow-x: clip;
	background: var(--ax-dark);
	color: var(--ax-text);
	font-family: var(--ax-font-sans);
	font-size: var(--ax-text-base);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.axxionix-site :where(img, svg, video, canvas) {
	display: block;
	max-width: 100%;
}

body.axxionix-site :where(button, input, textarea, select) {
	font: inherit;
}

body.axxionix-site :where(a) {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

body.axxionix-site :where(h1, h2, h3, h4, h5, h6, p) {
	margin-block-start: 0;
}

body.axxionix-site :where(h1, h2, h3, h4) {
	color: var(--ax-white);
	font-weight: 600;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

body.axxionix-site h1 {
	font-size: var(--ax-h1);
	line-height: 0.98;
}

body.axxionix-site h2 {
	font-size: var(--ax-h2);
	line-height: 1.04;
}

body.axxionix-site h3 {
	font-size: var(--ax-h3);
	line-height: 1.1;
}

body.axxionix-site h4 {
	font-size: var(--ax-h4);
	line-height: 1.16;
}

body.axxionix-site p {
	color: var(--ax-text-muted);
	text-wrap: pretty;
}

/* Strong keyboard focus */
body.axxionix-site :focus-visible {
	outline: 2px solid var(--ax-green);
	outline-offset: 4px;
}

/* Bricks-compatible section/container foundation */
body.axxionix-site :where(.brxe-section, .ax-section) {
	position: relative;
	width: 100%;
	padding-block: var(--ax-section-space);
}

body.axxionix-site :where(.ax-section--compact) {
	padding-block: var(--ax-section-space-sm);
}

body.axxionix-site :where(.brxe-container, .ax-container) {
	width: min(100% - (2 * var(--ax-gutter)), var(--ax-content-width));
	margin-inline: auto;
}

body.axxionix-site .ax-reading-width {
	width: min(100%, var(--ax-reading-width));
}

body.axxionix-site .ax-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ax-stack-gap, var(--ax-space-6));
}

body.axxionix-site .ax-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ax-cluster-gap, var(--ax-space-4));
}

body.axxionix-site .ax-grid {
	display: grid;
	grid-template-columns: repeat(var(--ax-grid-cols, 3), minmax(0, 1fr));
	gap: var(--ax-grid-gap, clamp(1.25rem, 1rem + 1vw, 2.5rem));
}

body.axxionix-site .ax-grid--2 {
	--ax-grid-cols: 2;
}

body.axxionix-site .ax-grid--3 {
	--ax-grid-cols: 3;
}

body.axxionix-site .ax-grid--4 {
	--ax-grid-cols: 4;
}

/* Premium surfaces */
body.axxionix-site .ax-surface {
	background:
		linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
		var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-lg);
	box-shadow: var(--ax-shadow-sm);
}

body.axxionix-site .ax-glass {
	background: rgba(11, 27, 25, 0.70);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-lg);
	box-shadow: var(--ax-shadow-md);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

body.axxionix-site .ax-glow {
	box-shadow: var(--ax-glow);
}

/* Eyebrow and gradient text */
body.axxionix-site .ax-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ax-green);
	font-size: var(--ax-text-xs);
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.axxionix-site .ax-eyebrow::before {
	content: "";
	width: 1.35rem;
	height: 1px;
	background: currentColor;
	box-shadow: 0 0 14px rgba(var(--ax-green-rgb), 0.7);
}

body.axxionix-site .ax-text-gradient {
	color: transparent;
	background: linear-gradient(105deg, #FFFFFF 5%, #CBE7DC 54%, var(--ax-green) 100%);
	background-clip: text;
	-webkit-background-clip: text;
}

/* Utilities kept intentionally small */
body.axxionix-site .u-text-center { text-align: center; }
body.axxionix-site .u-align-center { align-items: center; }
body.axxionix-site .u-justify-between { justify-content: space-between; }
body.axxionix-site .u-width-full { width: 100%; }
body.axxionix-site .u-relative { position: relative; }
body.axxionix-site .u-overflow-hidden { overflow: hidden; }
body.axxionix-site .u-muted { color: var(--ax-text-muted); }

/* Responsive defaults */
@media (max-width: 991px) {
	body.axxionix-site .ax-grid--4,
	body.axxionix-site .ax-grid--3 {
		--ax-grid-cols: 2;
	}
}

@media (max-width: 767px) {
	body.axxionix-site .ax-grid,
	body.axxionix-site .ax-grid--2,
	body.axxionix-site .ax-grid--3,
	body.axxionix-site .ax-grid--4 {
		--ax-grid-cols: 1;
	}

	body.axxionix-site :where(.brxe-section, .ax-section) {
		padding-block: clamp(4rem, 3rem + 8vw, 6rem);
	}
}

/* Respect user preference and keep the site usable without motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}