/**
 * 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: #6b7280;
	--hafez-color-border: #e5e7eb;
	--hafez-color-surface: #ffffff;
	--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;
}