/**
 * Hafez - Frontend styles.
 *
 * Project-wide design tokens live in :root and are prefixed with "hafez".
 */

:root {
	/* Colors */
	--hafez-color-primary: #2563eb;
	--hafez-color-primary-hover: #1d4ed8;
	--hafez-color-text: #1f2937;
	--hafez-color-text-muted: #94a3b8;
	--hafez-color-border: #e2e8f0;
	--hafez-color-surface: #f8fafc;
	--hafez-color-background: #f9fafb;
	--hafez-color-success: #16a34a;
	--hafez-color-danger: #dc2626;

	/* Typography */
	--hafez-font-size-sm: 0.875rem;
	--hafez-font-size-base: 1rem;
	--hafez-font-size-lg: 1.125rem;
	--hafez-line-height: 1.6;

	/* Spacing */
	--hafez-space-xs: 0.25rem;
	--hafez-space-sm: 0.5rem;
	--hafez-space-md: 1rem;
	--hafez-space-lg: 1.5rem;
	--hafez-space-xl: 2.5rem;

	/* Radii */
	--hafez-radius-sm: 6px;
	--hafez-radius-md: 10px;
	--hafez-radius-lg: 16px;

	/* Shadows */
	--hafez-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--hafez-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

	/* Transitions */
	--hafez-transition: 160ms ease-in-out;
}

/* Feature blocks follow a simple BEM-like naming: hafez_block, hafez_block__element, hafez_block--modifier. */

.hafez_block {
	color: var(--hafez-color-text);
	font-size: var(--hafez-font-size-base);
	line-height: var(--hafez-line-height);
}

.hafez_block__title {
	margin-bottom: var(--hafez-space-sm);
	font-size: var(--hafez-font-size-lg);
}

.hafez_block__description {
	color: var(--hafez-color-text-muted);
}

.hafez_block--muted {
	color: var(--hafez-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.hafez_block * {
		transition: none !important;
		animation: none !important;
	}
}

/* Account panel blank canvas (fullscreen layout). */
body.hafez-account-canvas {
	margin: 0;
	background: #f7f4f2;
}

.hafez_reading_time--block {
	display: block;
	margin-bottom: 0.75em;
}
/* Gateway tax: per-line tax on cart / checkout and the note under the product price. */
.hafez-line-tax {
	display: inline-block;
	margin-top: 2px;
	font-size: 0.8em;
	opacity: 0.75;
}

.hafez-price-tax-note {
	display: block;
	margin-top: 4px;
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.75;
}

/* Field messages (user-field-validation.js): engine rows, the controls that
 * replace the browser's bubbles and the captcha notes. One step smaller than
 * the field title, with room above. !important like the field title, so theme
 * and WooCommerce text rules cannot enlarge them. */
.hafez-user-fields__msg,
.hafez-native-msg,
.hafez-captcha__error,
.hafez-captcha__hint,
.hafez-user-fields-form .hafez-user-fields__msg,
.woocommerce form .form-row .hafez-native-msg,
body.hafez-account-page .woocommerce-MyAccount-content .hafez-user-fields__msg {
	display: block;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	color: var(--hafez-color-danger-text, #991b1b);
	font-size: calc(var(--hafez-uf-label-size, 13px) - 1px) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}

.hafez-captcha__hint {
	color: var(--hafez-color-warning-text, #9a3412);
}

.hafez-user-fields__msg[hidden],
.hafez-native-msg[hidden],
.hafez-captcha__error[hidden],
.hafez-captcha__hint[hidden] {
	display: none !important;
}