/**
 * Main Stylesheet
 * 
 * @package MhsCommerce
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Colors - Premium Traditional Persian */
	--color-primary: #8B1538; /* Deep burgundy/dark red */
	--color-primary-hover: #6B0F2A;
	--color-secondary: #1E5F5B; /* Deep teal/green-blue */
	--color-secondary-hover: #174A47;
	
	/* Backgrounds */
	--color-bg-cream: #FAF8F5; /* Warm off-white */
	--color-bg-light: #F5F3F0;
	--color-bg-white: #FFFFFF;
	
	/* Text */
	--color-text-primary: #2D2D2D;
	--color-text-secondary: #5A5A5A;
	--color-text-muted: #8C8C8C;
	
	/* Borders */
	--color-border: #E0DDD9;
	--color-border-light: #EFECE8;
	
	/* Typography */
	--font-body: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-heading: 'Vazirmatn', Georgia, serif;
	
	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;
	
	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

body {
	font-family: var(--font-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg-cream);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
}

/* RTL Support */
body.rtl {
	direction: rtl;
	text-align: start;
}

body.ltr {
	direction: ltr;
	text-align: start;
}

/* Skip Link */
.skip-link {
	position: absolute;
	inset-block-start: -999px;
	inset-inline-start: -999px;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	background: var(--color-primary);
	color: white;
	padding: var(--spacing-sm) var(--spacing-md);
	z-index: 100000;
}

/* Screen Reader Only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.sr-only:focus {
	position: static;
	width: auto;
	height: auto;
	padding: initial;
	margin: initial;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.3;
	margin-block-end: var(--spacing-md);
	color: var(--color-text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-block-end: var(--spacing-md);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-hover);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

/* Container removed for full-width layout */
/* Use px-4 or custom padding classes directly on elements */

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	padding: var(--spacing-sm) var(--spacing-lg);
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-base);
}

.btn-primary {
	background-color: var(--color-primary);
	color: white;
}

.btn-primary:hover {
	background-color: var(--color-primary-hover);
	color: white;
}

.btn-secondary {
	background-color: var(--color-secondary);
	color: white;
}

.btn-secondary:hover {
	background-color: var(--color-secondary-hover);
	color: white;
}

.btn-outline {
	background-color: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

.btn-outline:hover {
	background-color: var(--color-primary);
	color: white;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	width: 100%;
	padding: var(--spacing-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

.mt-0 { margin-block-start: 0; }
.mb-0 { margin-block-end: 0; }
.my-auto { margin-block: auto; }
.mx-auto { margin-inline: auto; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }