/**
 * FALMIS — HAFEZ SKIN
 *
 * A warm, sepia palette for the فال حافظ page only.
 *
 * Nothing here restyles a component. The design system reads tier-2
 * semantic tokens and nothing else, so a different palette is a matter of
 * redefining those tokens inside one scope. Buttons, cards, borders,
 * radii, shadows, motion and every shape stay exactly as the system draws
 * them — they simply resolve to brown.
 *
 * The scope is `.fm-skin--hafez`, which wraps the page content only. The
 * navbar and footer sit outside it and keep the house violet.
 *
 * Every colour below was measured before it was used. See the table at
 * the end of this file.
 */

.fm-skin--hafez {

	/* ---------------------------------------------------------------
	 * Primitives — literal values, never read by a component.
	 * Mirrors the system's tier-1 layer.
	 * --------------------------------------------------------------- */

	--hz-ink-900: #0D0704;
	--hz-ink-800: #140D07;
	--hz-ink-700: #1B120B;
	--hz-ink-600: #241810;

	--hz-sienna-700: #7C3D12;
	--hz-copper-700: #94501A;
	--hz-copper-600: #A85F1B;
	--hz-amber-700: #B45309;
	--hz-brick-600: #9A3412;

	--hz-sand-050: #F6EFE4;
	--hz-sand-200: #E2D3BE;
	--hz-gold-300: #EBC98F;
	--hz-sand-400: #B49A7C;
	--hz-sand-500: #9C8467;

	--hz-parchment: #F7F1E4;
	--hz-parchment-ink: #30241A;
	--hz-parchment-soft: #5B4636;

	/* ---------------------------------------------------------------
	 * Tier 2 — the layer components actually read.
	 * --------------------------------------------------------------- */

	--fm-surface-0: var(--hz-ink-900);
	--fm-surface-1: var(--hz-ink-800);
	--fm-surface-2: var(--hz-ink-700);
	--fm-surface-3: var(--hz-ink-600);

	--fm-text-primary: var(--hz-sand-050);
	--fm-text-body: var(--hz-sand-200);
	--fm-text-accent: var(--hz-gold-300);
	--fm-text-muted: var(--hz-sand-400);
	--fm-text-disabled: var(--hz-sand-500);

	--fm-brand: var(--hz-copper-700);
	--fm-brand-hover: var(--hz-copper-600);
	--fm-brand-active: var(--hz-sienna-700);
	--fm-accent: var(--hz-amber-700);
	--fm-accent-hover: var(--hz-copper-600);

	/*
	 * Borders warm up too. The system's are white alpha, which reads
	 * blue-grey against brown; these are parchment alpha at the same
	 * strengths, so nothing changes but the hue.
	 */
	--fm-border-subtle: rgba(246, 239, 228, .08);
	--fm-border: rgba(246, 239, 228, .13);
	--fm-border-strong: rgba(246, 239, 228, .20);
	--fm-border-accent: rgba(235, 201, 143, .38);
	--fm-border-input: rgba(246, 239, 228, .36);

	--fm-overlay-scrim: rgba(13, 7, 4, .74);
	--fm-tint-violet: rgba(148, 80, 26, .18);
	--fm-tint-fuchsia: rgba(180, 83, 9, .12);
	--fm-highlight-top: rgba(255, 240, 220, .16);

	--fm-focus-ring: var(--hz-gold-300);
	--fm-focus-shadow: 0 0 0 3px rgba(235, 201, 143, .40);

	/* ---------------------------------------------------------------
	 * Gradients
	 *
	 * Same structure as the system's: a full ramp for large surfaces
	 * and a stop-shifted one for small controls, because on a 44px pill
	 * the extremes land on the rounded caps.
	 *
	 * Every stop is dark enough for white label text. The lightest,
	 * amber-700, measures 5.02:1 — better headroom than the system's
	 * own fuchsia end at 4.71:1.
	 * --------------------------------------------------------------- */

	--fm-gradient-aurora: linear-gradient(var(--fm-aurora-angle),
		var(--hz-sienna-700), var(--hz-copper-700), var(--hz-amber-700));

	--fm-gradient-button: linear-gradient(var(--fm-aurora-angle),
		var(--hz-sienna-700) -22%,
		var(--hz-copper-700) 42%,
		var(--hz-amber-700) 122%);

	--fm-gradient-deep:
		radial-gradient(1100px 720px at 74% 6%, rgba(148, 80, 26, .30), transparent 66%),
		radial-gradient(920px 640px at 99% 86%, rgba(180, 83, 9, .20), transparent 64%),
		radial-gradient(820px 620px at 34% 108%, rgba(124, 61, 18, .22), transparent 68%),
		linear-gradient(112deg, var(--hz-ink-900) 0%, var(--hz-ink-800) 52%, var(--hz-ink-700) 100%);

	--fm-gradient-deep-soft:
		radial-gradient(1100px 720px at 74% 6%, rgba(148, 80, 26, .16), transparent 68%),
		radial-gradient(920px 640px at 99% 86%, rgba(180, 83, 9, .11), transparent 66%),
		linear-gradient(112deg, var(--hz-ink-900) 0%, var(--hz-ink-800) 55%, var(--hz-ink-700) 100%);

	/* Glow means importance; the hue follows the brand. */
	--fm-glow-violet: 0 16px 50px rgba(148, 80, 26, .26);
	--fm-glow-fuchsia: 0 16px 50px rgba(180, 83, 9, .24);
	--fm-glow-aurora: 0 18px 66px rgba(148, 80, 26, .24),
		0 10px 42px rgba(180, 83, 9, .18);

	/* The page paints its own ground; it is not the site background. */
	background: var(--fm-surface-0);
	color: var(--fm-text-body);
}

/* =============================================================
   PAGE PIECES

   Only what the system has no component for. Everything else on
   this page is .fm-card, .fm-btn, .fm-badge, .fm-alert, .fm-grid.
   ============================================================= */

/* ---------- breadcrumb ---------- */

.hz-crumb {
	padding-block: var(--fm-space-6) 0;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

.hz-crumb a {
	color: var(--fm-text-muted);
	text-decoration: none;
}

.hz-crumb a:hover {
	color: var(--fm-text-accent);
}

.hz-crumb span {
	margin-inline: var(--fm-space-2);
	opacity: .6;
}

/* ---------- hero ---------- */

.hz-hero {
	padding-block: var(--fm-space-16) var(--fm-space-12);
	text-align: center;
}

.hz-hero__title {
	margin: var(--fm-space-2) auto var(--fm-space-4);
	max-inline-size: 22ch;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-4xl);
	line-height: var(--fm-lh-4xl);
	font-weight: var(--fm-weight-display);
}

.hz-hero__lead {
	margin: 0 auto;
	max-inline-size: 60ch;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-md);
	line-height: var(--fm-lh-md);
}

.hz-hero .fm-cluster {
	justify-content: center;
	margin-block-start: var(--fm-space-6);
}

.hz-micro {
	margin-block-start: var(--fm-space-3);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

/* ---------- the oath callout ---------- */

.hz-oath {
	margin-block-start: var(--fm-space-6);
	padding: var(--fm-space-5) var(--fm-space-6);
	border-inline-start: 3px solid var(--fm-accent);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-base);
	line-height: var(--fm-lh-base);
}

.hz-oath b {
	display: block;
	margin-block-end: var(--fm-space-2);
	color: var(--fm-text-primary);
	font-weight: var(--fm-weight-bold);
}

/* ---------- image placeholder ----------
 *
 * Same idea as the blog cards: a deliberate panel, not a gap, so the
 * layout is final before the artwork arrives.
 */

.hz-visual {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-gradient-deep-soft);
}

.hz-visual img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.hz-visual__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--fm-space-3);
	justify-items: center;
	color: var(--fm-text-accent);
	opacity: .45;
}

.hz-visual__empty span {
	font-size: var(--fm-text-xs);
}

/* ---------- the ghazal, on parchment ----------
 *
 * The one light surface in the whole product. It is the page's point:
 * a poem should look like it sits on paper, not on a screen. Its own
 * local tokens flip the text dark so nothing inherits wrongly.
 */

.hz-ghazal {
	--fm-text-primary: var(--hz-parchment-ink);
	--fm-text-body: var(--hz-parchment-ink);
	--fm-text-muted: var(--hz-parchment-soft);

	display: flex;
	flex-direction: column;
	gap: var(--fm-space-4);
	padding: var(--fm-space-8) var(--fm-space-6);
	border-radius: var(--fm-radius-xl);
	background: var(--hz-parchment);
	color: var(--hz-parchment-ink);
	text-align: center;
}

.hz-ghazal .fm-badge {
	align-self: center;
	border-color: rgba(48, 36, 26, .22);
	background: rgba(48, 36, 26, .07);
	color: var(--hz-parchment-soft);
}

.hz-ghazal__title {
	margin: 0;
	color: var(--hz-parchment-ink);
	font-size: var(--fm-text-xl);
	line-height: var(--fm-lh-xl);
	font-weight: var(--fm-weight-bold);
}

.hz-verse {
	margin: 0;
	color: var(--hz-parchment-ink);
	font-size: var(--fm-text-md);
	line-height: 2.2;
}

.hz-verse em {
	display: block;
	margin-block-start: var(--fm-space-4);
	color: var(--hz-parchment-soft);
	font-size: var(--fm-text-xs);
	font-style: normal;
}

/* ---------- audio bar placeholder ---------- */

.hz-audio {
	display: flex;
	align-items: center;
	gap: var(--fm-space-3);
	margin-block-start: auto;
	padding: var(--fm-space-3) var(--fm-space-4);
	border: 1px solid rgba(48, 36, 26, .18);
	border-radius: var(--fm-radius-full);
	background: rgba(48, 36, 26, .06);
	color: var(--hz-parchment-soft);
	font-size: var(--fm-text-xs);
}

.hz-audio__bar {
	flex: 1;
	block-size: 3px;
	border-radius: var(--fm-radius-full);
	background: rgba(48, 36, 26, .18);
}

.hz-audio__time {
	font-variant-numeric: tabular-nums;
}

/* ---------- result split ---------- */

@media (min-width: 861px) {

	.hz-result {
		grid-template-columns: 1.15fr .85fr;
	}
}

/* ---------- author ---------- */

.hz-author {
	display: flex;
	gap: var(--fm-space-5);
	align-items: center;
}

.hz-author__avatar {
	inline-size: calc(64px * var(--fm-scale));
	block-size: calc(64px * var(--fm-scale));
	flex: none;
	display: grid;
	place-content: center;
	overflow: hidden;
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-full);
	background: var(--fm-gradient-button);
	color: var(--fm-text-on-brand);
}

.hz-author__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ---------- share row ---------- */

.hz-note {
	margin-block-start: var(--fm-space-6);
}

/* =============================================================
   MEASURED

   Text on the four surfaces, worst case of the four:

     text-primary   15.16    text-body      11.78
     text-accent    10.95    text-muted      6.47
     text-disabled   4.87

   White on the button gradient stops:

     sienna-700  8.29    copper-700  6.14    amber-700  5.02

   Parchment card: #30241A on #F7F1E4 = 13.39,
   muted #5B4636 on #F7F1E4 = 7.86.

   Every pair clears 4.5:1. The tightest is text-disabled at 4.87,
   which matches the system's own 5.14 for the same role.
   ============================================================= */