/*
 * Tattoo Demo components.
 *
 * Part 1 maps legwork-base's light-first components onto this all-dark site:
 * the parent paints body text, light cards, the FAQ, fields and the footer in
 * --color-ink on --color-paper, which here would be black on off-white or
 * black on black. Part 2 (to come) is this site's own compositions.
 *
 * Same `components` layer as the parent, loaded after it, so equal
 * specificity wins here. Mobile-first; hover only inside
 * (hover: hover) and (pointer: fine); focus-visible always.
 */

/* ------------------------------------------------------- 1. dark-site map */
@layer components {
	body { color: var(--td-body); }
	::selection { background: var(--color-paper); color: var(--color-ink); }

	/* Headings: Cinzel, uppercase, wide tracking (Kyngo), off-white. */
	h1, h2, h3,
	.lw-hero__title {
		font-family: var(--font-heading);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-heading);
		color: var(--color-paper);
	}

	/* Small uppercase labels: nav, buttons, eyebrows, step numbers. */
	.lw-nav__list a,
	.lw-btn,
	.lw-eyebrow,
	.lw-steps__num {
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-label);
	}

	/* Header: flat black bar, square. */
	.lw-header__bar { border-radius: 0; box-shadow: none; }
	.lw-nav__list a, .lw-nav-toggle { border-radius: 0; }
	.lw-brand__name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-heading); }

	/* Primary: solid off-white, near-black text (17.36:1). No drift layer. */
	.lw-btn--primary,
	.lw-nav__list .lw-nav__cta a,
	.lw-form .jet-form-builder__action-button {
		background: var(--color-paper);
		color: var(--td-page);
	}
	:is(.lw-btn--primary, .lw-form .jet-form-builder__action-button)::before { content: none; } /* same selector as the parent's, so it wins */
	:is(.lw-btn--primary, .lw-nav__cta a, .lw-form .jet-form-builder__action-button)::after {
		background: linear-gradient(105deg, transparent 30%, rgb(0 0 0 / 0.08) 50%, transparent 70%);
	}
	.lw-btn--primary .lw-btn__tile { background: var(--color-ink); color: var(--color-paper); }

	/* Secondary: Kyngo's ghost button, a light frame. */
	.lw-btn--secondary,
	.lw-sheet--dark .lw-btn--secondary { border: var(--frame); color: var(--color-paper); }
	.lw-btn--secondary .lw-btn__tile,
	.lw-sheet--dark .lw-btn--secondary .lw-btn__tile { background: transparent; color: var(--color-paper); }

	/* Dark sheets: flat, no aurora layer. */
	.lw-sheet--dark::before { content: none; }

	/* Light surfaces become raised dark ones. */
	.lw-card--light { background: var(--color-ink-raised); border: 1px solid var(--color-line); color: inherit; }
	.lw-eyebrow { background: transparent; border: 1px solid var(--color-line); color: var(--color-paper); }
	.lw-faq__item { background: var(--color-ink-raised); border-color: var(--color-line); }
	.lw-faq__q { color: var(--color-paper); }
	.lw-client__logo { background: var(--color-ink-raised); }

	/* Fields: light text on the dark field; stay dark on focus. */
	.lw-form :is(input:not([type="hidden"]), textarea, select) { color: var(--color-paper); border-radius: 0; }
	.lw-form :is(input, textarea, select):focus-visible { background: var(--color-panel); }

	/* Footer: black band, light links. */
	.lw-footer { background: var(--color-ink); }
	.lw-footer__name,
	.lw-footer__contact a, .lw-footer__socials a, .lw-footer__nav a, .lw-footer__legal a { color: var(--color-paper); }
	.lw-footer__name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-heading); }

	@media (hover: hover) and (pointer: fine) {
		/* Beats the parent's translucent hover, which would hide the dark CTA text. */
		.lw-nav__list .lw-nav__cta a:hover { background: var(--color-paper); }
	}
}

/*
 * Unlayered, like the parent's own JetFormBuilder overrides (plugin CSS is
 * unlayered and beats every layer). Keep small.
 */
.lw-form .jet-form-builder-message { background: var(--color-ink-raised); color: var(--color-paper); }
.lw-form .jet-form-builder-message--success { background: var(--color-ink-raised); border-color: var(--color-paper); }
.lw-form .jet-form-builder-message--error { background: var(--color-error-bg); color: var(--color-error); }