/* Appearance control and the optional Light palette ("Coral gallery", D-037).
   Dark stays the default and owns every value outside [data-rrc-theme='light'].
   Loaded after cabos-design.css; html:root[data-rrc-theme] (0,2,1) outranks its
   html .x (0,1,1) literals without !important.

   Ink ladder on #FFFFFF: text 18.79 / soft 9.81 / muted 5.95. Accent-as-text
   #A94A35 5.65; white on the #A94A35 button 5.65. */

/* ── Control: native disclosure + labelled radios (THV D-026 pattern) ─────── */
.rrc-appearance { display: none; position: relative; font: 400 .9rem/1.4 var(--lvc-font-body); }
html[data-rrc-appearance-ready] .rrc-appearance { display: block; }
/* Reserve the desktop slot before hydration, without exposing an inert control. */
html[data-rrc-appearance] .lvc-nav .rrc-appearance { display: block; visibility: hidden; }
html[data-rrc-appearance-ready] .lvc-nav .rrc-appearance { visibility: visible; }
/* Desktop only: brand.css hides .lvc-nav at <=980px, and this sheet loads later. */
@media (min-width: 981px) { .lvc-nav { display: flex; align-items: center; gap: 1.6rem; } }
/* The control costs ~120px; below 1100px that wrapped "Request Availability"
   onto two lines (measured 52px -> 76px header actions at 1000px). */
@media (min-width: 981px) and (max-width: 1099px) {
	.lvc-nav, .lvc-nav__list { gap: 1rem; }
	.lvc-header__inner { gap: 1rem; }
	.lvc-nav .rrc-appearance summary { padding: 0 4px; }
	.lvc-header__actions .lvc-btn { white-space: nowrap; }
}
.rrc-appearance summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: var(--lvc-soft); font-weight: 500; cursor: pointer; white-space: nowrap; }
.rrc-appearance summary::-webkit-details-marker { display: none; }
.rrc-appearance summary:hover { color: var(--lvc-text); }
.rrc-appearance summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.rrc-appearance fieldset { position: absolute; right: 0; top: 100%; z-index: 60; width: 176px; margin: 0; padding: 8px; border: 1px solid var(--lvc-border); border-radius: var(--lvc-radius); background: var(--lvc-card); color: var(--lvc-text); box-shadow: var(--lvc-elev-2); }
.rrc-appearance legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rrc-appearance label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 8px; color: var(--lvc-text); cursor: pointer; }
.rrc-appearance input { appearance: auto; width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: var(--lvc-btn-bg); }
.rrc-appearance label:has(input:checked) { font-weight: 600; }
.rrc-appearance label:hover { background: var(--lvc-bg-alt); }
.lvc-drawer .rrc-appearance { margin: 0 0 .75rem; }
.lvc-drawer .rrc-appearance summary { padding: 0; }
.lvc-drawer .rrc-appearance fieldset { position: static; width: 100%; box-shadow: none; }
@media (forced-colors: active) {
	.rrc-appearance fieldset { border: 1px solid CanvasText; }
	.rrc-appearance input { forced-color-adjust: auto; }
}

/* ── Light tokens ─────────────────────────────────────────────────────────── */
/* --lvc-bg-deep is deliberately NOT remapped: it is the dark band token (D-030)
   behind closing CTAs and photo fallbacks, whose ink is pinned light. */
html:root[data-rrc-theme='light'] {
	--lvc-bg:               #FFFFFF;
	--lvc-bg-alt:           #F5F3F1;
	--lvc-card:             #FFFFFF;
	--lvc-border:           #E4DFDB;
	--lvc-border-soft:      rgba(20,17,16,.12);
	--lvc-text:             #141110;
	--lvc-soft:             #4A423E;
	--lvc-muted:            #6B625D;
	--lvc-accent:           #A94A35;
	--lvc-accent-hover:     #8F3F2B;
	--lvc-gold:             #8F3F2B;
	--lvc-accent-text:      #A94A35;
	--lvc-accent-text-hover:#8F3F2B;
	--lvc-ghost-border:     #8A817B;
	--lvc-bg-rgb:           255 255 255;
	--lvc-accent-rgb:       169 74 53;
	--lvc-accent-hover-rgb: 143 63 43;
	--lvc-shadow-rgb:       20 17 16;
	--lvc-cal-booked:       #D9D2CC;
	--lvc-cal-open:         #FFFFFF;
	--lvc-cal-hatch:        rgba(20,17,16,.14);
	color-scheme: light;
}

/* Photo surfaces and the dark CTA bands keep DARK grounds in Light (D-013 rule 1).
   The footer is the one exception: Luis asked for a pale footer (see below).
   brand.css already pins their ink light; this re-pins the surfaces that ink sits
   on, so a dead photo falls back to a dark card, not white-on-white. */
html:root[data-rrc-theme='light'] :is(
	.lvc-hero, .lvc-hero--page, .lvc-archive-hero, .lvc-single__hero,
	.lvc-article__hero, .lvc-term__head, .lvc-tile, .lvc-area-card,
	.lvc-reveal, .lvc-ed-hero, .lvc-rm-hero,
	.rrc-shero--photo, .rrc-chapter, .rrc-hero, .rrc-home-hero, .rrc-area-tile,
	.lvc-rm-area, .lvc-tax-area-card, .rrc-bento__panel--photo, .rrc-rail__card,
	.lvc-tax-breadcrumb,
	.lvc-cta, .rrc-final-cta, .lvc-area-cta, .lvc-maghub-final, .lvc-rm-final,
	.lvc-art-final, .lvc-single-final, .lvc-tax-cta, .lvc-ed-cta, .lvc-sig,
	.rrc-space--setting) {
	--lvc-bg:           #050505;
	--lvc-bg-alt:       #0a0a0a;
	--lvc-card:         #151311;
	--lvc-border:       #232326;
	--lvc-border-soft:  rgba(255,255,255,.10);
	--lvc-bg-rgb:       5 5 5;
	--lvc-shadow-rgb:   0 0 0;
	--lvc-accent-text:  #D79A86;
	--lvc-accent-text-hover: #E2AA98;
	--lvc-gold:         #E2AA98;
	--lvc-accent-hover-rgb: 226 170 152;
	/* body's light ink is inherited as a computed value, not a var: re-state it. */
	color: var(--lvc-text);
	color-scheme: dark;
}

/* brand.css never listed the rail card, so its ink is pinned here as well. */
html:root[data-rrc-theme='light'] .rrc-rail__card {
	--lvc-text:         #FFFFFF;
	--lvc-soft:         #c2c1c0;
	--lvc-muted:        #c2c1c0;
	--lvc-accent:       #D79A86;
	--lvc-accent-hover: #FFFFFF;
	--lvc-accent-rgb:   215 154 134;
	--lvc-ghost-border: rgba(255,255,255,.45);
}
/* Below the photo on phones, the villa hero's copy sits on its own transparent
   box: without a ground it would show the white page under pinned white ink. */
html:root[data-rrc-theme='light'] .rrc-hero { background-color: var(--lvc-bg); }

/* Pale footer (Luis, 2026-09-25, matching Tulum's Light). brand.css pins the
   footer's ink white for its dark photo close, so the ink is re-pinned dark here;
   the flat ground replaces cabos-design.css's #0a0a0a. */
html:root[data-rrc-theme='light'] .lvc-footer {
	--lvc-text:         #141110;
	--lvc-soft:         #4A423E;
	--lvc-muted:        #6B625D;
	--lvc-accent:       #A94A35;
	--lvc-accent-hover: #8F3F2B;
	--lvc-accent-rgb:   169 74 53;
	--lvc-accent-text:  #A94A35;
	--lvc-ghost-border: #8A817B;
	--lvc-border:       #E4DFDB;
	--lvc-border-soft:  rgba(20,17,16,.12);
	background: #F5F3F1;
	border-top-color: #E4DFDB;
	color: var(--lvc-text);
}
html:root[data-rrc-theme='light'] .lvc-footer__contact li { border-bottom-color: var(--lvc-border); }

/* Cards that sit ON photo surfaces become white panels in Light (D-013 rule 2). */
html:root[data-rrc-theme='light'] :is(.rrc-home-match, .lvc-fbar, .rrc-snapshot, .lvc-rm-panel) {
	--lvc-bg:           #FFFFFF;
	--lvc-bg-alt:       #F5F3F1;
	--lvc-card:         #FFFFFF;
	--lvc-border:       #E4DFDB;
	--lvc-border-soft:  rgba(20,17,16,.12);
	--lvc-text:         #141110;
	--lvc-soft:         #4A423E;
	--lvc-muted:        #6B625D;
	--lvc-accent:       #A94A35;
	--lvc-accent-hover: #8F3F2B;
	--lvc-accent-rgb:   169 74 53;
	--lvc-accent-text:  #A94A35;
	--lvc-ghost-border: #8A817B;
	color: var(--lvc-text);
	color-scheme: light;
}

/* ── cabos-design.css literals, re-expressed through the tokens ───────────── */
html:root[data-rrc-theme='light'] .rrc-home-kicker { color: var(--lvc-accent-text); }
html:root[data-rrc-theme='light'] body { background: var(--lvc-bg); color: var(--lvc-text); }
html:root[data-rrc-theme='light'] .lvc-header { background: #FFFFFF; border-bottom-color: #E4DFDB; }
/* Ghost buttons read tokens, so the same rule stays light-on-photo inside heroes. */
html:root[data-rrc-theme='light'] :is(.lvc-btn--ghost,.rrc-home-btn--ghost,.rrc-home-btn--hero-ghost,.rrc-btn--outline) { color: var(--lvc-text); border-color: var(--lvc-ghost-border); }
html:root[data-rrc-theme='light'] :is(.lvc-btn--ghost,.rrc-home-btn--ghost,.rrc-home-btn--hero-ghost,.rrc-btn--outline):hover { background: rgb(var(--lvc-accent-rgb) / .12); color: var(--lvc-accent-hover); border-color: var(--lvc-accent); }
html:root[data-rrc-theme='light'] .rrc-home-match { background: var(--lvc-card); border-color: var(--lvc-border); color: var(--lvc-text); box-shadow: var(--lvc-elev-photo); }
html:root[data-rrc-theme='light'] .rrc-home-match h2 { color: var(--lvc-text); }
html:root[data-rrc-theme='light'] .rrc-home-match p,
html:root[data-rrc-theme='light'] .rrc-home-match__facts span { color: var(--lvc-soft); }
html:root[data-rrc-theme='light'] .rrc-home-match__facts div { background: var(--lvc-bg-alt); border-color: var(--lvc-border); }
html:root[data-rrc-theme='light'] :is(input,select,textarea,.lvc-fbar__input,.rrc-cfilter input) { color-scheme: light; }
html:root[data-rrc-theme='light'] :is(.lvc-fbar, .lvc-fbar__inner) { background: var(--lvc-card); border-color: var(--lvc-border); }
/* Fields read --rrc-field-bg (motion-effects.css); the #8A817B edge is 3.8:1 on
   the white bar, so each field keeps a visible boundary (WCAG 1.4.11). */
html:root[data-rrc-theme='light'] .lvc-fbar { --rrc-field-bg: #F5F3F1; --rrc-polish-line-soft: #8A817B; }
html:root[data-rrc-theme='light'] .lvc-card { background: var(--lvc-card); border-color: var(--lvc-border); }
html:root[data-rrc-theme='light'] .lvc-card__body { background: var(--lvc-card); }
html:root[data-rrc-theme='light'] :is(.rrc-stats-bar,.rrc-award-band) { background: var(--lvc-bg-alt); }
html:root[data-rrc-theme='light'] .rrc-snapshot { background: var(--lvc-card); }
html:root[data-rrc-theme='light'] .rrc-sticky { background: var(--lvc-card); color: var(--lvc-text); border-top: 1px solid var(--lvc-border); }
html:root[data-rrc-theme='light'] .lvc-availability { --lvc-cal-booked: #D9D2CC; --lvc-cal-open: #FFFFFF; --lvc-cal-hatch: rgba(20,17,16,.14); }
html:root[data-rrc-theme='light'] ::selection { background: #A94A35; color: #FFFFFF; }

/* Villa collection pills: at the Dark .55 alpha the copper outline is 2.1:1 on
   the #F5F3F1 band; .8 gives a crisp 3:1+ edge (WCAG 1.4.11). */
html:root[data-rrc-theme='light'] .rrc-chipline .rrc-chip--link:not(:hover):not(:focus-visible) { border-color: rgb(var(--lvc-accent-rgb) / .8); }