/* LCP-PUBLIC-INSTALLATION-THEME-LABERINTO-001 (ADR 032 §4). Mechanism
   proved by granort-theme.css: a plain static asset, never bundled by
   Astro, linked as the last element of <body>, scoped entirely by the
   `[data-theme="laberinto"]` attribute set on <body> in CoreNativeShell —
   a core-native or granort render never matches anything here.

   Laberinto de Hilos' real site (../LiveTest) has no navy-inverted chrome
   to fight (header/footer sit on the same light surface as the body), so
   this theme does not need granort's dual light/dark token scoping. Its
   real distinctiveness is typographic: Fraunces serif headings over a
   DM Sans / Inter body (../LiveTest/css/variables.css: --font-heading,
   --font-body). The warm color and shadow personality (borders, card
   shadows, tinted surfaces) already derives automatically from the
   CoreNativeVisualConfig tokens via core-native's own color-mix(...)
   formulas — no separate radius/shadow overrides are needed here, only
   the font-family this base system has no slot for. */

/* Body face: overrides whatever font_family the tenant-owner has picked in
   the Manager (system/inter/source-sans-3) — that dropdown has no serif or
   DM Sans option to select (CoreNativeVisualConfigRequest's font_family
   allowlist is closed on purpose), so, like granort's chrome colors, this
   theme owns typography outright rather than partially following it. */
[data-theme="laberinto"] body {
	font-family: 'DM Sans Variable', var(--font);
}

[data-theme="laberinto"] h1,
[data-theme="laberinto"] h2,
[data-theme="laberinto"] h3,
[data-theme="laberinto"] .brand-name {
	font-family: 'Fraunces Variable', Georgia, serif;
	font-optical-sizing: auto;
	letter-spacing: -0.01em;
}

[data-theme="laberinto"] .page-heading h1 {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   LCP-PUBLIC-INSTALLATION-THEME-LABERINTO-002. The palette, ported from the
   real site's own design tokens (../LiveTest/css/variables.css).

   MECHANISM: every rule below sets CUSTOM PROPERTIES on a container that
   core-native's existing rules already read via var(...). It never declares
   `color` or `background` on a component selector. That is not a stylistic
   preference -- granort-theme.css records two failed attempts and a QA NO_GO
   (QA-…-AXE-CONTRAST-002) proving that a theme cannot win a specificity
   contest against Astro's scoped selectors: Astro appends one
   [data-astro-cid-*] per compound part, so `.footer-navigation h2` compiles
   to (0,3,1) and beats any `[data-theme=...] .footer-navigation h2` override
   at (0,2,1) outright, with document order never consulted. Custom properties
   sidestep the contest entirely: a direct declaration on a container beats an
   inherited one before specificity is ever considered.

   WHY CONTAINERS AND NOT `body`: CoreNativeShell writes the tenant-owner's
   Manager tokens as an INLINE style on <body>. An inline declaration outranks
   any stylesheet rule for that same element, so `[data-theme] body { --primary }`
   could never win. The four chrome containers below inherit from <body>, and a
   direct declaration on them does win -- which is exactly the seam granort uses.

   COLOR CHOICES, measured with src/lib/wcag-contrast.mjs:
     --text #2D2520 on #FFFEFB ....... 14.90:1
     --primary #8B1F6B on #FFFEFB .....  8.31:1  (and white on primary, 8.31:1)
     --accent #176F79 on #FFFEFB ......  5.81:1
   The real site's bright teal (--color-accent: #2BB5C4) is NOT used here: it
   measures 2.45:1 on the surface and core-native spends --accent on focus
   outlines and blockquote borders, which would leave the focus indicator below
   even the 3:1 non-text minimum. #176F79 is that same system's own
   --color-accent-text, so this is its documented dark pairing, not an invention.

   Unlike granort there is no inverted chrome: the real site runs header, main
   and footer on one light ground, so all four scopes carry the same values. -- */

[data-theme="laberinto"] .utility-strip,
[data-theme="laberinto"] .site-main {
	--surface: #FFFEFB;
	--text: #2D2520;
	--primary: #8B1F6B;
	--accent: #176F79;
}

/* The header sits ON the warm ground rather than on a card, exactly as the
   real site does (.header background is --color-bg at 92%, over a --color-bg
   page: effectively the ground colour). Solid, not translucent: a translucent
   chrome cannot be asserted with parseComputedRgb, and over an identical
   ground it renders the same anyway. */
[data-theme="laberinto"] .site-header {
	--surface: #F7F1E8;
	--text: #2D2520;
	--primary: #8B1F6B;
	--accent: #176F79;
}

/* LCP-PUBLIC-INSTALLATION-THEME-LABERINTO-003. The footer IS inverted chrome.
   The earlier note in this file claimed laberinto had none; the real site
   contradicts it -- ../LiveTest/css/global.css paints .footer with
   --color-dark-purple (#5C1245) under a warm radial glow and sets light text.
   So this scope inverts like granort's, with its own measured pairings
   (white 12.79:1, warm #F5C56A 8.04:1 on the purple).

   --primary doubles as the footer's link/heading colour here, which is why it
   becomes the warm tone rather than the magenta: magenta on dark purple is the
   one pairing in this palette that has nowhere near enough separation. Note
   core-native paints the footer as color-mix(--primary 4%, --surface), so the
   real background is that purple warmed very slightly by this token -- close
   to the reference's glow, and the test measures the COMPUTED result rather
   than assuming #5C1245. */
[data-theme="laberinto"] .site-footer {
	--surface: #5C1245;
	--text: #FFFEFB;
	--primary: #F5C56A;
	--accent: #F5C56A;
}

/* Sticky header. Additive -- core-native declares no `position` for
   .site-header, so this introduces a property rather than contesting one. */
[data-theme="laberinto"] .site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The signature detail of the real site: nav links are underlined by a
   hand-drawn squiggle, not a straight rule (../LiveTest/css/global.css
   .nav__link::after). Reproduced as the same inline SVG, and additive in the
   same way granort's [aria-current] rule is -- a new pseudo-element, never a
   redeclared colour. It is decoration only: the current page is already
   conveyed by aria-current, which this cannot and does not replace. */
[data-theme="laberinto"] .desktop-navigation .nav-list a,
[data-theme="laberinto"] .nav-panel .nav-list a {
	position: relative;
	font-weight: 700;
}

[data-theme="laberinto"] .desktop-navigation .nav-list a::after,
[data-theme="laberinto"] .nav-panel .nav-list a::after {
	content: '';
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: -2px;
	height: 8px;
	opacity: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1,5.8 C15,1.8 29,7.4 45,4.6 C61,1.7 78,6.8 99,3.8' stroke='%238B1F6B' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: opacity 220ms ease-out;
}

/* Hover: el squiggle aparece semi-transparente, con la transición ya
   declarada en la regla base del pseudo-elemento. */
[data-theme="laberinto"] .desktop-navigation .nav-list a:hover::after,
[data-theme="laberinto"] .nav-panel .nav-list a:hover::after {
	opacity: 0.4;
}

/* Active: sólido. */
[data-theme="laberinto"] .desktop-navigation .nav-list a[aria-current="page"]::after,
[data-theme="laberinto"] .nav-panel .nav-list a[aria-current="page"]::after {
	opacity: 1;
}

/* El badge del carrito es magenta del sistema (--primary, ya medido 8.31:1
   sobre el surface #FFFEFB), no el teal base, y se pinta arriba-derecha del
   ícono del carrito: .cart-icon ya es position:relative (ShellNavigation),
   así la posición absoluta se ancla al ícono, no al texto del link. */
[data-theme="laberinto"] .cart-icon {
	width: 1.25em;
	height: 1.25em;
	margin-inline-end: .75em;
}

[data-theme="laberinto"] .cart-badge {
	position: absolute;
	top: -5px;
	right: -7px;
	left: auto;
	bottom: auto;
	min-width: 1.2em;
	height: 1.2em;
	border-radius: 999px;
	background: #8B1F6B;
	color: #fff;
	font-size: .62em;
	line-height: 1;
	padding: 0;
	border: 2px solid var(--surface);
}

/* Cards lift and their image zooms on hover (.producto-card in the reference).
   Both are additive properties on a hover state core-native leaves unstyled,
   and both are motion, so they are dropped entirely under reduced motion --
   the border/shadow change still signals hover without any movement. */
@media (prefers-reduced-motion: no-preference) {
	[data-theme="laberinto"] .discovery-card {
		transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
	}

	[data-theme="laberinto"] .discovery-card:hover {
		transform: translateY(-4px);
	}

	[data-theme="laberinto"] .discovery-card .card-media img {
		transition: transform 300ms ease-out;
	}

	[data-theme="laberinto"] .discovery-card:hover .card-media img {
		transform: scale(1.025);
	}
}

[data-theme="laberinto"] .discovery-card .card-media {
	overflow: hidden;
	border-radius: .75rem;
	background: #EDE3D4;
}

/* The warm page ground (--color-bg) is the one value that cannot travel
   through a token: core-native paints the page with `body { background:
   var(--surface) }` and cards read that SAME --surface, so a cream --surface
   would render cream cards on a cream page. This is therefore the file's only
   direct declaration, and it is deliberately a single-class-equivalent
   selector: `body[data-theme="laberinto"]` sits at (0,1,1), exactly tying
   core-native's compiled `body[data-astro-cid-*]`, and this stylesheet is the
   last <link> in <body>. Ties -- and only ties -- are broken by document
   order, which is the case granort's rework proved reliable. The Playwright
   test asserts the COMPUTED background, so if this ever stops tying, the
   suite fails rather than the site quietly losing its ground.

   Note the COMPOUND selector, not the descendant form used by every other
   rule in this file. CoreNativeShell sets data-theme on <body> ITSELF, so
   `[data-theme="laberinto"] body` would ask for a body nested inside a themed
   element and match nothing -- it is only correct for the chrome containers
   above, which really are body's descendants. The first draft here used the
   descendant form and rendered a white ground; the computed-style assertion
   caught it, which is exactly why that assertion exists. */
body[data-theme="laberinto"] {
	background: #F7F1E8;
}

/* ---------------------------------------------------------------------------
   LCP-PUBLIC-LABERINTO-FOOTER-001. The real site's footer structure
   (../LiveTest/css/global.css .footer*), ported onto the shell-owned footer.

   Everything here is a NEW class or an additive property: core-native
   declares no .footer-tagline/.footer-social/.footer-trust/.footer-payments/
   .footer-bottom, so these rules have no competing selector and apply
   regardless of specificity. The gold radial glow is a ::before layer rather
   than a `background` override for exactly that reason -- core-native's
   `.site-footer` already wins backgrounds on specificity, and a pseudo-element
   on an element whose position core-native never touches is additive. Light
   text and the warm gold accent come from the [data-theme="laberinto"]
   .site-footer token scope above; nothing here re-declares `color`. -- */
[data-theme="laberinto"] .site-footer { position: relative; overflow: hidden; }
[data-theme="laberinto"] .site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 12% 20%, rgb(232 163 61 / .16), transparent 18rem);
}
[data-theme="laberinto"] .site-footer > * { position: relative; }

[data-theme="laberinto"] .footer-tagline {
	max-width: 34ch;
	margin: 1rem 0 1.25rem;
	color: color-mix(in srgb, var(--text) 78%, transparent);
	line-height: 1.75;
}

[data-theme="laberinto"] .footer-social { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
[data-theme="laberinto"] .footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
	border-radius: .6rem;
	color: var(--text);
	transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
[data-theme="laberinto"] .footer-social-link:hover,
[data-theme="laberinto"] .footer-social-link:focus-visible {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--surface);
}

[data-theme="laberinto"] .footer-trust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--text) 6%, transparent);
}
[data-theme="laberinto"] .footer-trust-note {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	max-width: 42ch;
	margin: 0;
	color: color-mix(in srgb, var(--text) 72%, transparent);
	font-size: .95rem;
	line-height: 1.55;
}
[data-theme="laberinto"] .footer-trust-note svg { flex: none; margin-top: .15rem; color: var(--primary); }
[data-theme="laberinto"] .footer-trust-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

[data-theme="laberinto"] .footer-payments { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
[data-theme="laberinto"] .footer-payments-label {
	color: color-mix(in srgb, var(--text) 52%, transparent);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
[data-theme="laberinto"] .footer-pago {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .3rem .6rem;
	border-radius: .4rem;
	background: #fff;
	color: #1a1a2e;
	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 .15rem .5rem rgb(0 0 0 / .18);
}

[data-theme="laberinto"] .footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
	color: color-mix(in srgb, var(--text) 52%, transparent);
	font-size: .85rem;
}