/* ==========================================================================
   Gadget5 Core Design System
   Version: 1.0.0
   Scope: brand tokens, shared accessibility and structural safeguards only.
   ========================================================================== */

/* === G5 CORE TOKENS v1.0.0 — START === */

:root {
	color-scheme: light;

	/* Official brand palette. */
	--g5-white: #ffffff;
	--g5-bg: #f0f8ff;
	--g5-teal: #40e0d0;
	--g5-yellow: #ffcc33;
	--g5-text: #2f4f4f;
	--g5-danger: #c1121f;

	/* Backward-compatible aliases used by existing Gadget5 modules. */
	--g5-turquoise: var(--g5-teal);
	--g5-gold: var(--g5-yellow);
	--g5-turquoise-deep: #2bb8ab;
	--g5-teal-deep: var(--g5-turquoise-deep);

	/* Derived interface colors. */
	--g5-text-soft: rgba(47, 79, 79, 0.68);
	--g5-text-faint: rgba(47, 79, 79, 0.52);
	--g5-line: rgba(47, 79, 79, 0.12);
	--g5-hairline: var(--g5-line);
	--g5-hairline-soft: #e3eef2;
	--g5-surface: rgba(255, 255, 255, 0.88);
	--g5-surface-solid: var(--g5-white);
	--g5-surface-soft: rgba(240, 248, 255, 0.78);
	--g5-danger-bg: #fff1f0;

	/* Shadows and glow. */
	--g5-shadow-xs: 0 2px 8px rgba(47, 79, 79, 0.06);
	--g5-shadow-sm: 0 8px 24px rgba(47, 79, 79, 0.09);
	--g5-shadow-md: 0 18px 48px rgba(47, 79, 79, 0.13);
	--g5-shadow: rgba(47, 79, 79, 0.1);
	--g5-turquoise-glow: rgba(64, 224, 208, 0.35);
	--g5-turquoise-glow-soft: rgba(64, 224, 208, 0.14);

	/* Shared geometry. */
	--g5-radius-sm: 10px;
	--g5-radius-md: 16px;
	--g5-radius-lg: 24px;
	--g5-radius-pill: 999px;
	--g5-tap-target: 44px;
	--g5-control-height: 52px;

	/* Motion. */
	--g5-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--g5-duration-fast: 160ms;
	--g5-duration-normal: 240ms;

	/* Safe-area values for fixed mobile controls. */
	--g5-safe-top: env(safe-area-inset-top, 0px);
	--g5-safe-right: env(safe-area-inset-right, 0px);
	--g5-safe-bottom: env(safe-area-inset-bottom, 0px);
	--g5-safe-left: env(safe-area-inset-left, 0px);
}

/* === G5 CORE TOKENS v1.0.0 — END === */

/* === G5 CORE FOUNDATIONS v1.0.0 — START === */

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

body {
	color: var(--g5-text);
	overflow-wrap: break-word;
}

img,
svg,
video,
canvas {
	max-width: 100%;
}

img,
video {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 3px solid var(--g5-yellow);
	outline-offset: 3px;
}

/* Avoid accidental viewport overflow from custom module containers. */
:where(
	.g5-category-page,
	.g5-category-page .site,
	.g5-category-page .site-content,
	.g5-category-page .content-area,
	.g5-category-page .site-main
) {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

body.g5-category-page {
	overflow-x: clip;
}

body.g5-category-page .content-area,
body.g5-category-page .site-main {
	width: 100%;
}

/* Structural helpers for the custom navigation walker. */
.g5-link {
	display: inline-flex;
	align-items: center;
	gap: 0.38em;
}

.g5-arr {
	flex: 0 0 auto;
	transform-origin: center;
	transition: transform var(--g5-duration-fast) var(--g5-ease);
}

.g5-item.active > .g5-link {
	color: var(--g5-teal-deep);
}

@media (hover: hover) and (pointer: fine) {
	.g5-item.has-sub:hover > .g5-link .g5-arr {
		transform: rotate(180deg);
	}
}

@supports not (overflow: clip) {
	body.g5-category-page {
		overflow-x: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* === G5 CORE FOUNDATIONS v1.0.0 — END === */