/*
Theme Name: Nexus Market
Theme URI: https://example.com/nexus-market
Author: Nexus Market Studio
Author URI: https://example.com
Description: A conversion-first WooCommerce marketplace theme for selling WordPress themes, plugins, and digital products. Built for single-vendor stores today, multi-vendor-ready tomorrow.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.2
WC requires at least: 8.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nexus-market
Tags: e-commerce, one-column, two-columns, custom-colors, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready

Nexus Market is a WordPress theme copyright 2026 Nexus Market Studio.
Nexus Market is distributed under the terms of the GNU GPL v2 or later.

This CSS file adds design tokens and base/utility styles layered on top of
theme.json global styles. Component-level CSS lives in assets/css/main.css
and assets/css/woocommerce.css (see inc/assets.php for enqueue order).
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Canvas */
	--nm-color-canvas: #FAFAF9;
	--nm-color-canvas-raised: #FFFFFF;
	--nm-color-canvas-sunken: #F1F1EF;

	/* Ink (zinc scale) */
	--nm-color-ink-900: #18181B;
	--nm-color-ink-700: #3F3F46;
	--nm-color-ink-500: #71717A;
	--nm-color-ink-300: #D4D4D8;
	--nm-color-ink-200: #E4E4E7;
	--nm-color-ink-100: #F4F4F5;

	/* Accent — electric indigo (override via Customizer -> nm_accent_color) */
	--nm-color-accent-h: 243;
	--nm-color-accent-s: 75%;
	--nm-color-accent-l: 59%;
	--nm-color-accent: hsl(var(--nm-color-accent-h) var(--nm-color-accent-s) var(--nm-color-accent-l));
	--nm-color-accent-hover: hsl(var(--nm-color-accent-h) var(--nm-color-accent-s) 52%);
	--nm-color-accent-soft: hsl(var(--nm-color-accent-h) 85% 96%);
	--nm-color-on-accent: #FFFFFF;

	/* Semantic */
	--nm-color-success: #15803D;
	--nm-color-warning: #B45309;
	--nm-color-danger: #B91C1C;
	--nm-color-star: #F5A623;

	/* Elevation */
	--nm-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
	--nm-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);
	--nm-shadow-lg: 0 12px 32px rgba(24, 24, 27, 0.12);

	/* Radius */
	--nm-radius-sm: 6px;
	--nm-radius-md: 10px;
	--nm-radius-lg: 16px;
	--nm-radius-pill: 999px;

	/* 8pt spacing scale */
	--nm-space-1: 4px;
	--nm-space-2: 8px;
	--nm-space-3: 16px;
	--nm-space-4: 24px;
	--nm-space-5: 32px;
	--nm-space-6: 48px;
	--nm-space-7: 64px;
	--nm-space-8: 96px;

	/* Layout */
	--nm-container: 1280px;
	--nm-container-wide: 1440px;
	--nm-gutter: var(--nm-space-3);
	--nm-cols: 12;

	/* Type */
	--nm-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--nm-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--nm-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Motion */
	--nm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--nm-duration-fast: 120ms;
	--nm-duration-base: 200ms;
}

/* Dark mode: toggled via [data-nm-theme="dark"] on <html>, see assets/js/dark-mode.js */
html[data-nm-theme="dark"] {
	--nm-color-canvas: #0F0F10;
	--nm-color-canvas-raised: #18181B;
	--nm-color-canvas-sunken: #131315;

	--nm-color-ink-900: #FAFAFA;
	--nm-color-ink-700: #D4D4D8;
	--nm-color-ink-500: #A1A1AA;
	--nm-color-ink-300: #3F3F46;
	--nm-color-ink-200: #27272A;
	--nm-color-ink-100: #1F1F22;

	--nm-color-accent-soft: hsl(var(--nm-color-accent-h) 40% 18%);
	--nm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--nm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
	--nm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	html[data-nm-theme="auto"] {
		--nm-color-canvas: #0F0F10;
		--nm-color-canvas-raised: #18181B;
		--nm-color-canvas-sunken: #131315;
		--nm-color-ink-900: #FAFAFA;
		--nm-color-ink-700: #D4D4D8;
		--nm-color-ink-500: #A1A1AA;
		--nm-color-ink-300: #3F3F46;
		--nm-color-ink-200: #27272A;
		--nm-color-ink-100: #1F1F22;
		--nm-color-accent-soft: hsl(var(--nm-color-accent-h) 40% 18%);
	}
}

/* =========================================================
   2. BASE / RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--nm-color-canvas);
	color: var(--nm-color-ink-900);
	font-family: var(--nm-font-ui);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--nm-font-heading);
	line-height: 1.15;
	font-weight: 600;
	color: var(--nm-color-ink-900);
	margin: 0 0 var(--nm-space-3);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* =========================================================
   3. ACCESSIBILITY
   ========================================================= */
.nm-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--nm-space-2);
	z-index: 10000;
	background: var(--nm-color-ink-900);
	color: #fff;
	padding: var(--nm-space-2) var(--nm-space-3);
	border-radius: var(--nm-radius-sm);
	transition: inset-block-start var(--nm-duration-base) var(--nm-ease);
}
.nm-skip-link:focus {
	inset-block-start: var(--nm-space-2);
}

:focus-visible {
	outline: 2px solid var(--nm-color-accent);
	outline-offset: 2px;
	border-radius: var(--nm-radius-sm);
}

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

/* =========================================================
   4. LAYOUT UTILITIES
   ========================================================= */
.nm-container {
	width: min(100% - (var(--nm-space-4) * 2), var(--nm-container));
	margin-inline: auto;
}
.nm-container--wide {
	width: min(100% - (var(--nm-space-4) * 2), var(--nm-container-wide));
	margin-inline: auto;
}

.nm-grid {
	display: grid;
	gap: var(--nm-gutter);
	grid-template-columns: repeat(var(--nm-cols), minmax(0, 1fr));
}

.nm-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }