/*
 * Ecommoda Child Theme - Base Styles
 * Global, site-wide custom styles for the Ecommoda storefront.
 *
 * Design tokens are sourced from https://ecommoda.com/ where values could
 * be confidently read from the live storefront. Tokens marked "tune during
 * visual QA" are placeholders and not yet verified against the reference.
 */

:root {

	/* Colors — read from the reference storefront's CSS custom properties */
	--ecm-color-text: #000000;
	--ecm-color-heading: #222222;
	--ecm-color-body-bg: #ffffff;
	--ecm-color-accent: #000000;
	--ecm-color-secondary: #222222;
	--ecm-color-muted: #878787;
	--ecm-color-link: #878787;
	--ecm-color-link-hover: #7a2731;
	--ecm-color-border: #dddddd;
	--ecm-color-button-bg: #222222;
	--ecm-color-button-text: #ffffff;
	--ecm-color-button-bg-hover: #000000;
	--ecm-color-sale: #ec0101;
	--ecm-color-error: #eb001b;
	--ecm-color-success: #428445;
	--ecm-color-warning: #e0b252;

	/* Typography — Poppins (body/heading) and Libre Baskerville (accent), per reference */
	--ecm-font-body: 'Poppins', sans-serif;
	--ecm-font-heading: 'Poppins', sans-serif;
	--ecm-font-accent: 'Libre Baskerville', serif;

	--ecm-font-size-base: 14px;
	--ecm-line-height-base: 1.7;
	--ecm-font-weight-base: 400;

	--ecm-line-height-heading: 1.4;
	--ecm-font-weight-heading: 600;
	--ecm-font-size-h1: 37px;
	--ecm-font-size-h2: 29px;
	--ecm-font-size-h3: 23px;
	--ecm-font-size-h4: 18px;
	--ecm-font-size-h5: 17px;
	--ecm-font-size-h6: 15.5px;

	/* Container / layout — max-width confirmed via reference (--wrapper-mw) */
	--ecm-container-max-width: 1420px;
	--ecm-container-padding: 40px; /* tune during visual QA */

	/* Spacing scale — not exposed by the reference; sensible default, tune during visual QA */
	--ecm-space-xs: 4px;
	--ecm-space-sm: 8px;
	--ecm-space-md: 16px;
	--ecm-space-lg: 24px;
	--ecm-space-xl: 40px;
	--ecm-space-2xl: 64px;

	/* Border radii — not exposed by the reference; sensible default, tune during visual QA */
	--ecm-radius-sm: 2px;
	--ecm-radius-md: 4px;
	--ecm-radius-full: 999px;

	/* Transitions — duration/easing confirmed via reference; fast/base are sensible defaults */
	--ecm-transition-fast: 0.2s ease;
	--ecm-transition-base: 0.3s ease;
	--ecm-transition-slow: 0.6s cubic-bezier(0, 0, 0.3, 1);

	/* Z-index layers — not exposed by the reference; sensible scale, tune during visual QA */
	--ecm-z-base: 1;
	--ecm-z-dropdown: 100;
	--ecm-z-sticky-header: 200;
	--ecm-z-overlay: 300;
	--ecm-z-drawer: 400;
	--ecm-z-modal: 500;
	--ecm-z-toast: 600;
}

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

body {
	margin: 0;
	background-color: var(--ecm-color-body-bg);
	color: var(--ecm-color-text);
	font-family: var(--ecm-font-body);
	font-size: var(--ecm-font-size-base);
	font-weight: var(--ecm-font-weight-base);
	line-height: var(--ecm-line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ecm-space-md);
	color: var(--ecm-color-heading);
	font-family: var(--ecm-font-heading);
	font-weight: var(--ecm-font-weight-heading);
	line-height: var(--ecm-line-height-heading);
}

h1 { font-size: var(--ecm-font-size-h1); }
h2 { font-size: var(--ecm-font-size-h2); }
h3 { font-size: var(--ecm-font-size-h3); }
h4 { font-size: var(--ecm-font-size-h4); }
h5 { font-size: var(--ecm-font-size-h5); }
h6 { font-size: var(--ecm-font-size-h6); }

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

a:hover,
a:focus {
	color: var(--ecm-color-link-hover);
}

/* Containers */

.ecommoda-container {
	width: 100%;
	max-width: var(--ecm-container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ecm-container-padding);
	padding-right: var(--ecm-container-padding);
}

.ecommoda-container-fluid {
	width: 100%;
	padding-left: var(--ecm-container-padding);
	padding-right: var(--ecm-container-padding);
}

/* Generic utilities */

.ecommoda-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ecommoda-text-center {
	text-align: center;
}

.ecommoda-hidden {
	display: none;
}