/*
 * Tarot Arabi — base layer
 *
 * A restrained modern reset plus element defaults. It deliberately keeps useful
 * native behaviour (focus outlines, native checkboxes and radios, form control
 * semantics) and only removes what gets in the way of the system.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Anchor jumps stay instant: smooth scrolling is motion, and the design
	   system asks for quiet, non-essential motion only. */
}

body {
	margin: 0;
	min-block-size: 100vh;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	text-align: start;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------- Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-4);
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
	/* No artificial letter-spacing: Arabic must never get Latin tracking. */
	letter-spacing: normal;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
}

h2 {
	font-size: var(--text-h2);
}

h3 {
	font-size: var(--text-h3);
}

h4,
h5,
h6 {
	font-size: var(--text-card);
	font-weight: var(--weight-bold);
}

/* ------------------------------------------------------------------ Text */

p {
	margin: 0 0 var(--space-4);
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-block-end: 0;
}

/* Emphasis inherits the surrounding family: IBM Plex Sans Arabic 700 inside
   body copy, Janna LT Bold 700 when it sits inside a heading. */
strong,
b {
	font-weight: var(--weight-bold);
}

small {
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

/* ---------------------------------------------------------------- Lists */

ul,
ol {
	margin: 0 0 var(--space-4);
	padding-inline-start: 1.4em;
}

li + li {
	margin-block-start: var(--space-1);
}

/* ---------------------------------------------------------------- Media */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-inline-size: 100%;
}

img,
video {
	block-size: auto;
}

/* Photography and Tarot artwork are never mirrored (§52). Directional icons
   are flipped deliberately through .ta-icon--directional instead. */

figure {
	margin: 0;
}

figcaption {
	margin-block-start: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

/* -------------------------------------------------------------- Controls */

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
	font-weight: var(--weight-bold);
}

/* checkbox/radio: semantics stay native (keyboard, assistive tech); their
   visual design is owned by components.css. */
input[type="checkbox"],
input[type="radio"] {
	inline-size: 20px;
	block-size: 20px;
	vertical-align: middle;
}

textarea {
	resize: vertical;
}

::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

/* --------------------------------------------------------------- Links */

/*
 * Link treatment (§8, owner-approved)
 *
 * Only anchors inside paragraph prose are editorial links: bold and underlined.
 * Every anchor outside a paragraph is an action — CTA, card action, navigation,
 * button-like anchor, badge, icon or header/footer link — and actions are never
 * underlined. They communicate through colour, weight, arrow movement and hover
 * animation instead. A component may opt into an underline explicitly.
 */
a {
	color: var(--color-green-900);
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-standard);
}

p a:not(.ta-button):not(.ta-link--cta) {
	font-weight: var(--weight-bold);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: rgba(23, 79, 58, 0.45);
	transition:
		color var(--duration-micro) var(--ease-standard),
		text-decoration-color var(--duration-micro) var(--ease-standard);
}

p a:not(.ta-button):not(.ta-link--cta):hover {
	text-decoration-color: currentcolor;
}

a:hover {
	/* Link hover deepens toward Deep Green: the accessible action shade. */
	color: var(--color-action-hover);
}

a:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
	border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------- Focus */
/* Never remove the focus ring without a replacement. The global ring is deep
   green for contrast on light surfaces; components sitting on deep green
   override the ring colour to gold. */

:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
}

/* ----------------------------------------------------------------- Rules */

hr {
	margin-block: var(--space-8);
	border: 0;
	border-block-start: var(--border-divider);
}

/* ------------------------------------------------------------- Selection */

::selection {
	background-color: var(--color-gold-soft);
	color: var(--color-charcoal);
}

/* --------------------------------------------------------- Reduced motion */
/* Non-essential movement is removed, not merely shortened to nothing that
   still animates. Transitions collapse to an imperceptible duration so state
   changes remain instant but correctly applied. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ta-card--interactive:hover {
		transform: none;
	}

	.ta-card--interactive:hover .ta-card__media img,
	.ta-card--interactive:has(:focus-visible) .ta-card__media img {
		transform: none;
	}

	/* The spinner stops rotating, but stays visible as a static progress mark. */
	.ta-button__spinner {
		animation: none;
	}

	/* Button lift/press and arrow shifts are non-essential movement. */
	.ta-button:hover,
	.ta-button:active,
	.ta-link--cta:hover .ta-icon--directional,
	[dir="ltr"] .ta-link--cta:hover .ta-icon--directional,
	.ta-card--interactive:hover .ta-link--cta .ta-icon--directional,
	[dir="ltr"] .ta-card--interactive:hover .ta-link--cta .ta-icon--directional {
		transform: none;
	}
}