/*
Theme Name: GS Superstore
Theme URI:
Author: GS Super Store
Author URI:
Description: Custom WooCommerce theme for GS Super Store, a B2B electronic components and LED display supplier. Built as a foundation for a spec-heavy, catalog-driven storefront.
Version: 0.3.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gs-superstore
Tags: e-commerce, woocommerce, custom
*/

/* -----------------------------------------------------------------------
   Design tokens
   Single source of truth for color, spacing, radius and shadow values.
   Component stylesheets (assets/css/*.css) consume these variables only —
   no component should hardcode a color or spacing value directly.
   ----------------------------------------------------------------------- */

:root {
	/* Color: brand */
	--gs-color-primary: #0b3d91;
	--gs-color-primary-hover: #082c6b;
	--gs-color-secondary: #1e293b;
	--gs-color-accent: #1aa3c9;

	/* Color: text */
	--gs-color-text: #1a202c;
	--gs-color-text-muted: #5b6472;
	--gs-color-text-on-dark: #f3f6fa;
	--gs-color-text-on-dark-muted: #b7c2d0;

	/* Color: surfaces */
	--gs-color-background: #ffffff;
	--gs-color-background-subtle: #f5f7fa;
	--gs-color-border: #e2e8f0;

	/* Color: status */
	--gs-color-success: #1f8a44;
	--gs-color-success-bg: #e8f6ec;
	--gs-color-danger: #c0392b;
	--gs-color-danger-bg: #fbeae8;

	/* Layout */
	--gs-container-width: 1280px;

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

	/* Radius */
	--gs-radius-sm: 4px;
	--gs-radius-md: 8px;
	--gs-radius-lg: 14px;

	/* Shadow */
	--gs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--gs-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--gs-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	/* Type */
	--gs-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------
   Reset & base
   ----------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	font-family: var(--gs-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--gs-color-text);
	background: var(--gs-color-background);
}

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

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--gs-space-sm);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--gs-color-text);
}

p {
	margin: 0 0 var(--gs-space-md);
}

button {
	font-family: inherit;
}

/* Consistent, visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--gs-color-accent);
	outline-offset: 2px;
}

/* Accessible skip link, hidden until focused via keyboard. */
.gs-skip-link {
	position: absolute;
	top: -100px;
	left: var(--gs-space-md);
	z-index: 10000;
	background: var(--gs-color-primary);
	color: #fff;
	padding: var(--gs-space-sm) var(--gs-space-md);
	border-radius: var(--gs-radius-sm);
	transition: top 0.15s ease;
}

.gs-skip-link:focus {
	top: var(--gs-space-md);
}

.gs-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Layout utilities
   ----------------------------------------------------------------------- */

.gs-container {
	width: 100%;
	max-width: var(--gs-container-width);
	margin-inline: auto;
	padding-inline: var(--gs-space-md);
}

.site-main {
	display: block;
}

.site-main:not(.gs-front-page) {
	padding: var(--gs-space-md);
}