/**
 * Design tokens — Jalil Theme
 * Editorial, near-monochrome palette (grafito cálido) matching the
 * Jalil Notary design reference. Every color/spacing/motion value used
 * anywhere in the theme should trace back to a variable defined here.
 */

:root {
	--radius: 0.375rem;

	/* Grafito cálido */
	--ink: oklch(0.18 0.01 285);
	--ink-2: oklch(0.32 0.008 285);
	--ink-soft: oklch(0.62 0.005 285);
	--surface: oklch(0.965 0.003 90);
	--panel: oklch(0.985 0.002 90);
	--background: oklch(0.99 0.002 90);
	--foreground: var(--ink);

	--border: oklch(0.18 0.01 285 / 0.11);
	--input: oklch(0.18 0.01 285 / 0.16);
	--ring: oklch(0.18 0.01 285 / 0.3);

	--primary: var(--ink);
	--primary-foreground: oklch(0.985 0.002 90);

	--font-display: "Libre Baskerville", ui-serif, Georgia, serif;
	--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	--container-max: 1240px;
	--container-pad: 1.5rem;

	--space-section: clamp(3.5rem, 3rem + 3vw, 5.5rem);

	--duration-fast: 200ms;
	--duration-normal: 400ms;
	--duration-slow: 700ms;
	--ease-out-expo: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container-x {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.hairline {
	height: 1px;
	width: 100%;
	background: var(--border);
}

.hairline-v {
	width: 1px;
	height: 100%;
	background: var(--border);
}

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 6px;
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.mono {
	font-family: var(--font-mono);
	font-feature-settings: "tnum";
}

.serif-italic {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
}

/* [bracket] highlight — subtle, since this palette is intentionally monochrome */
.hl {
	font-style: italic;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.stars {
	letter-spacing: 0.25em;
	color: var(--ink);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-on-dark-primary,
.btn-on-dark-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding-inline: 1.1rem;
	border-radius: 2px;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.btn-primary {
	background: var(--ink);
	color: var(--primary-foreground);
}
.btn-primary:hover {
	background: var(--ink-2);
}

.btn-secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--border);
}
.btn-secondary:hover {
	background: var(--surface);
	border-color: var(--ink);
}

.btn-on-dark-primary {
	background: var(--background);
	color: var(--ink);
}
.btn-on-dark-primary:hover {
	background: var(--panel);
}

.btn-on-dark-secondary {
	background: transparent;
	color: var(--background);
	border-color: oklch(1 0 0 / 0.2);
}
.btn-on-dark-secondary:hover {
	border-color: oklch(1 0 0 / 0.45);
}

/* ==========================================================================
   Depth / atmosphere backgrounds
   ========================================================================== */

.bg-depth {
	background-image: linear-gradient(180deg, var(--background) 0%, var(--surface) 55%, var(--panel) 100%);
}

.bg-depth-soft {
	background-image: linear-gradient(180deg, var(--panel) 0%, var(--background) 60%, var(--surface) 100%);
}

.bg-ink-depth {
	background-color: var(--ink);
	background-image: radial-gradient(ellipse 80% 50% at 50% 0%, oklch(0.24 0.01 285 / 0.8) 0%, transparent 70%);
}

.depth-hover {
	transition: transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo);
}
.depth-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px -18px oklch(0.18 0.01 285 / 0.14);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes jalil-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-up {
	animation: jalil-fade-up var(--duration-slow) var(--ease-out-expo) both;
}

@keyframes jalil-slow-reveal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.slow-reveal {
	animation: jalil-slow-reveal 1100ms ease-out both;
}

/*
 * `.reveal` only hides content when the `.js` class is present on <html>
 * (set synchronously in <head>, see header.php). Without JS — or before
 * main.js's IntersectionObserver has a chance to run — content stays fully
 * visible instead of being stuck at opacity:0.
 */
.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fixed delays for a short, hand-picked sequence of elements (e.g. hero badge → title → description → actions). */
.js .reveal--d1 { transition-delay: 80ms; }
.js .reveal--d2 { transition-delay: 160ms; }
.js .reveal--d3 { transition-delay: 240ms; }
.js .reveal--d4 { transition-delay: 320ms; }

/*
 * Cascading delay for repeated items (service rows, review cards, steps…).
 * Add alongside `.reveal` directly on each repeated element — no inline
 * styles or per-item markup needed, just nth-child position within its
 * parent list/grid.
 */
.js .reveal-stagger:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger:nth-child(2) { transition-delay: 70ms; }
.js .reveal-stagger:nth-child(3) { transition-delay: 140ms; }
.js .reveal-stagger:nth-child(4) { transition-delay: 210ms; }
.js .reveal-stagger:nth-child(5) { transition-delay: 280ms; }
.js .reveal-stagger:nth-child(6) { transition-delay: 350ms; }
.js .reveal-stagger:nth-child(7) { transition-delay: 420ms; }
.js .reveal-stagger:nth-child(8) { transition-delay: 490ms; }

@media (prefers-reduced-motion: reduce) {
	.fade-up,
	.slow-reveal,
	.js .reveal {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

.link-underline {
	position: relative;
	display: inline-block;
}
.link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform-origin: right center;
	transform: scaleX(0);
	transition: transform var(--duration-normal) var(--ease-out-expo);
}
.link-underline:hover::after {
	transform-origin: left center;
	transform: scaleX(1);
}