/**
 * EMPORAS Theme — Main Stylesheet
 *
 * This file contains all theme styles. Currently minimal —
 * will be populated with the full EMPORAS design system in upcoming steps:
 *  - Design tokens (CSS variables for colors, fonts, spacing)
 *  - Header (utility bar, main header, navigation)
 *  - Homepage sections (hero, trust strip, categories, products, brands, B2B CTA, blog)
 *  - WooCommerce template overrides (shop, single product, cart, checkout)
 *  - My Account dashboard (B2B portal)
 *  - Footer
 *
 * @package EMPORAS
 * @since   1.0.0
 */

/* ============================================
   DESIGN TOKENS — based on EMPORAS logo palette
   ============================================ */
:root {
	/* Brand colors — derived directly from logo */
	--emporas-navy: #1E2A5E;
	--emporas-navy-dark: #1E2A5E;
	--emporas-navy-light: #3A4A8C;
	--emporas-steel: #8B92A8;
	--emporas-steel-light: #B4B9C7;

	/* Neutrals */
	--charcoal: #1A1A1A;
	--anthracite: #2D2D2D;
	--graphite: #4B4B4B;
	--concrete: #E5E5E5;
	--light-grey: #F5F5F5;
	--off-white: #FAFAFA;
	--white: #FFFFFF;

	/* Functional */
	--success-green: #16A34A;
	--warning-amber: #F59E0B;
	--danger-red: #DC2626;

	/* Typography */
	--font-display: 'Barlow Condensed', 'Helvetica Neue', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

	/* Spacing scale */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 48px;
	--space-2xl: 80px;

	/* Layout */
	--container-max: 1440px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--charcoal);
	background: var(--white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--emporas-navy); text-decoration: none; }
a:hover { color: var(--emporas-navy-dark); }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.2;
	margin: 0 0 var(--space-md);
	color: var(--charcoal);
}

/* ============================================
   LAYOUT HELPERS
   ============================================ */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

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

.screen-reader-text:focus {
	background: var(--white);
	border-radius: var(--radius-md);
	clip: auto;
	color: var(--charcoal);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

/* ============================================
   MINIMAL FOOTER (placeholder until full build)
   ============================================ */
.site-footer {
	background: var(--charcoal);
	color: var(--white);
	padding: var(--space-xl) 0;
	margin-top: var(--space-2xl);
}

.site-footer__copyright {
	margin: 0;
	font-size: 14px;
	opacity: 0.8;
	text-align: center;
}

/* ============================================
   POST/PAGE BASE
   ============================================ */
.site-main {
	padding: var(--space-xl) 0;
}

.entry-title {
	font-size: 36px;
	margin-bottom: var(--space-md);
}

.entry-content {
	font-size: 16px;
	line-height: 1.7;
}