/**
 * FALMIS — TAROT SKIN
 *
 * Midnight indigo with gold, for the فال تاروت page only.
 *
 * Same method as the Hafez skin: nothing here restyles a component. The
 * design system reads tier-2 semantic tokens and nothing else, so a new
 * palette is a matter of redefining those inside one scope. Every shape,
 * border, radius, shadow and transition stays exactly as the system draws
 * it.
 *
 * What makes this read as tarot rather than as the house violet is the
 * gold — accents, borders, rules and the card edges. The button gradient
 * stays in the indigo range because gold cannot carry white label text:
 * white on gold measures about 2:1 and the system's rule 7 exists for
 * precisely that.
 *
 * Measured table at the end of this file.
 */

.fm-skin--tarot {

	/* ---------------------------------------------------------------
	 * Primitives
	 * --------------------------------------------------------------- */

	--tr-ink-900: #06060F;
	--tr-ink-800: #0B0B1A;
	--tr-ink-700: #111024;
	--tr-ink-600: #17162E;

	--tr-royal-900: #2A2A72;
	--tr-indigo-800: #3730A3;
	--tr-violet-800: #5B21B6;

	--tr-gold-300: #F0D98C;
	--tr-gold-500: #C9A227;
	--tr-gold-700: #8A6D1F;

	--tr-lilac-050: #F3F1FF;
	--tr-lilac-200: #D6D2EC;
	--tr-lilac-400: #A9A4C6;
	--tr-lilac-500: #8C87AB;

	/* ---------------------------------------------------------------
	 * Tier 2
	 * --------------------------------------------------------------- */

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

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

	--fm-brand: var(--tr-indigo-800);
	--fm-brand-hover: var(--tr-violet-800);
	--fm-brand-active: var(--tr-royal-900);
	--fm-accent: var(--tr-gold-500);
	--fm-accent-hover: var(--tr-gold-300);

	/* Borders carry the gold. This is the tell that it is not the house. */
	--fm-border-subtle: rgba(240, 217, 140, .09);
	--fm-border: rgba(240, 217, 140, .15);
	--fm-border-strong: rgba(240, 217, 140, .24);
	--fm-border-accent: rgba(240, 217, 140, .45);
	--fm-border-input: rgba(240, 217, 140, .38);

	--fm-overlay-scrim: rgba(6, 6, 15, .76);
	--fm-tint-violet: rgba(55, 48, 163, .22);
	--fm-tint-fuchsia: rgba(201, 162, 39, .10);
	--fm-highlight-top: rgba(255, 249, 230, .18);

	--fm-focus-ring: var(--tr-gold-300);
	--fm-focus-shadow: 0 0 0 3px rgba(240, 217, 140, .42);

	/* ---------------------------------------------------------------
	 * Gradients — indigo, never gold. See the note at the top.
	 * White on the lightest stop measures 8.98:1.
	 * --------------------------------------------------------------- */

	--fm-gradient-aurora: linear-gradient(var(--fm-aurora-angle),
		var(--tr-royal-900), var(--tr-indigo-800), var(--tr-violet-800));

	--fm-gradient-button: linear-gradient(var(--fm-aurora-angle),
		var(--tr-royal-900) -22%,
		var(--tr-indigo-800) 42%,
		var(--tr-violet-800) 122%);

	--fm-gradient-deep:
		radial-gradient(1100px 720px at 74% 6%, rgba(55, 48, 163, .34), transparent 66%),
		radial-gradient(920px 640px at 99% 86%, rgba(201, 162, 39, .12), transparent 64%),
		radial-gradient(820px 620px at 34% 108%, rgba(91, 33, 182, .24), transparent 68%),
		linear-gradient(112deg, var(--tr-ink-900) 0%, var(--tr-ink-800) 52%, var(--tr-ink-700) 100%);

	--fm-gradient-deep-soft:
		radial-gradient(1100px 720px at 74% 6%, rgba(55, 48, 163, .18), transparent 68%),
		radial-gradient(920px 640px at 99% 86%, rgba(201, 162, 39, .07), transparent 66%),
		linear-gradient(112deg, var(--tr-ink-900) 0%, var(--tr-ink-800) 55%, var(--tr-ink-700) 100%);

	/*
	 * The system reserves deep-rich for the tarot card back. This is the
	 * one page entitled to it, so it is the most saturated surface here.
	 */
	--fm-gradient-deep-rich:
		radial-gradient(1000px 700px at 66% 0%, rgba(55, 48, 163, .48), transparent 62%),
		radial-gradient(880px 620px at 102% 78%, rgba(201, 162, 39, .18), transparent 60%),
		radial-gradient(760px 600px at 26% 112%, rgba(91, 33, 182, .34), transparent 66%),
		linear-gradient(112deg, var(--tr-ink-900) 0%, var(--tr-ink-800) 48%, var(--tr-ink-600) 100%);

	--fm-glow-violet: 0 16px 50px rgba(55, 48, 163, .34);
	--fm-glow-fuchsia: 0 16px 50px rgba(201, 162, 39, .16);
	--fm-glow-aurora: 0 18px 66px rgba(55, 48, 163, .30),
		0 10px 42px rgba(201, 162, 39, .14);

	background: var(--fm-surface-0);
	color: var(--fm-text-body);
}

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

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

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

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

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

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

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

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

.tr-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);
}

.tr-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);
}

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

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

/* ---------- image placeholder ---------- */

.tr-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);
}

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

.tr-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;
}

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

/* ---------- the spread ----------
 *
 * Three cards face up, the way a reading actually lands. The system's
 * falmis-tarot.css carries the real 3D flip for the app; this page only
 * has to show what a result looks like, and that sheet's spread layout
 * is flagged for redesign in the spec, so nothing here depends on it.
 */

.tr-spread {
	display: grid;
	gap: var(--fm-space-4);
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 520px) {

	.tr-spread {
		gap: var(--fm-space-3);
	}
}

.tr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--fm-space-2);
	aspect-ratio: 2 / 3;
	padding: var(--fm-space-3);
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-lg);
	background: var(--fm-gradient-deep-rich);
	text-align: center;
	overflow: hidden;
}

/* A hairline of gold inside the edge, like a printed card. */
.tr-card::before {
	content: "";
	position: absolute;
	inset: var(--fm-space-2);
	border: 1px solid var(--fm-border-subtle);
	border-radius: var(--fm-radius-sm);
	pointer-events: none;
}

.tr-card__slot {
	color: var(--fm-text-muted);
	font-size: var(--fm-text-2xs);
	letter-spacing: 0;
}

.tr-card__name {
	margin: 0;
	color: var(--fm-text-accent);
	font-size: var(--fm-text-base);
	line-height: var(--fm-lh-base);
	font-weight: var(--fm-weight-bold);
}

.tr-card__sym {
	color: var(--fm-text-accent);
	opacity: .85;
}

/* A reversed card turns its art, never its label. */
.tr-card--reversed .tr-card__sym {
	transform: rotate(180deg);
}

.tr-card__tag {
	position: absolute;
	inset-block-end: var(--fm-space-3);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-2xs);
}

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

@media (min-width: 861px) {

	.tr-result {
		grid-template-columns: 1.05fr .95fr;
	}
}

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

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

.tr-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);
}

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

   Text on the four surfaces, worst of the four:

     text-primary   15.82    text-body      12.00
     text-accent    12.61    text-muted      7.40
     text-disabled   5.18

   White on the button gradient stops:

     royal-900  12.56    indigo-800  9.93    violet-800  8.98

   Every pair clears 4.5:1. Gold is never a fill behind white text,
   only accent, border and rule — white on gold-500 is about 2:1.
   ============================================================= */