/* ========================================================================
   TEMPLATE BASE — shared contract and hard-coded color retokenization
   ======================================================================== */

/*
   TEMPLATE TOKEN CONTRACT

   A template may provide these --tpl-* custom properties on
   html[data-template="X"].  The fallback after each var() preserves the
   current site's hard-coded value when a token is not provided.

   --tpl-surface             surface for unit photo controls (P9)
   --tpl-status-*-bg         available/reserved/sold badge backgrounds (P1)
   --tpl-status-*-fg         available/reserved/sold badge foregrounds (P1)
   --tpl-table-head-bg       units table header background (P2)
   --tpl-table-head-fg       units table header foreground (P2)
   --tpl-hero-ink            shared hero content foreground (P3)
   --tpl-hero-sub            hero subtitle foreground (P3)
   --tpl-hero-title          hero title foreground (P3)
   --tpl-hero-tag            hero tagline foreground (P3)
   --tpl-hero-rule           hero scroll indicator border color (P3)
   --tpl-hero-dot            hero scroll indicator marker color (P3)
   --tpl-danger              contact form error message foreground (P4)
   --tpl-label-bg            features image label background (P6)
   --tpl-label-fg            features image label foreground (P6)
   --tpl-cta-bg              CTA banner background (P5)
   --tpl-cta-ink             CTA banner heading foreground (P5)
   --tpl-cta-button-bg       CTA banner button background (P5)
   --tpl-cta-button-ink      CTA banner button foreground (P5)
   --tpl-cta-button-border   CTA banner button border (P5)
   --tpl-cta-button-hover-bg CTA banner button hover background (P5)
   --tpl-cta-button-hover-ink CTA banner button hover foreground (P5)

   --color-accent is deliberately not retokenized: it remains the branding
   config value (R3).  Inline branding tokens are not redefined here; each
   template owns its fonts and palette in its own file (M3/N2).
*/

/* P8 — template sections own their background rhythm and headline treatment. */
html[data-template] .section:nth-child(even) {
  background: none;
}

html[data-template] .section-headline {
  text-align: left;
}

html[data-template] .section-headline::after {
  display: none;
}

/* P9 — main.css consumes this token for unit photo controls. */
html[data-template] {
  --color-surface: var(--tpl-surface, var(--color-bg-alt));
}

/* P1 — main.css status colors are hard-coded in the shared skin. */
html[data-template] .status-available {
  background: var(--tpl-status-available-bg, rgba(34, 197, 94, 0.12));
  color: var(--tpl-status-available-fg, #16a34a);
}

html[data-template] .status-reserved {
  background: var(--tpl-status-reserved-bg, rgba(245, 158, 11, 0.12));
  color: var(--tpl-status-reserved-fg, #d97706);
}

html[data-template] .status-sold {
  background: var(--tpl-status-sold-bg, rgba(156, 163, 175, 0.12));
  color: var(--tpl-status-sold-fg, #6b7280);
}

/* P2 — keep the table header readable on light template palettes. */
html[data-template] .units-table thead {
  background: var(--tpl-table-head-bg, var(--color-primary));
  color: var(--tpl-table-head-fg, #fff);
}

/* P3 — all five hard-coded hero foreground values become template tokens. */
html[data-template] .hero-content {
  color: var(--tpl-hero-ink, #fff);
}

html[data-template] .hero-subtitle {
  color: var(--tpl-hero-sub, var(--color-accent));
}

html[data-template] .hero-title {
  color: var(--tpl-hero-title, #fff);
}

html[data-template] .hero-tagline {
  color: var(--tpl-hero-tag, rgba(255, 255, 255, 0.85));
}

html[data-template] .hero-scroll-indicator span {
  border-color: var(--tpl-hero-rule, rgba(255, 255, 255, 0.4));
}

html[data-template] .hero-scroll-indicator span::after {
  background: var(--tpl-hero-dot, rgba(255, 255, 255, 0.6));
}

/* P4 — hard-coded form error color. */
html[data-template] .form-message {
  color: var(--tpl-danger, #b91c1c);
}

/* P6 — hard-coded foreground/background on image labels. */
html[data-template] .features-image-label {
  background: var(--tpl-label-bg, rgba(var(--color-accent-rgb, 200, 169, 96), 0.9));
  color: var(--tpl-label-fg, #fff);
}

/* P5 — sections.css marks this background !important. */
html[data-template] .section-cta-banner {
  background: var(--tpl-cta-bg, var(--color-accent)) !important;
}

html[data-template] .cta-banner-headline {
  color: var(--tpl-cta-ink, #fff);
}

html[data-template] .section-cta-banner .btn-accent {
  background: var(--tpl-cta-button-bg, #fff);
  color: var(--tpl-cta-button-ink, var(--color-accent));
  border-color: var(--tpl-cta-button-border, #fff);
}

html[data-template] .section-cta-banner .btn-accent:hover {
  background: var(--tpl-cta-button-hover-bg, transparent);
  color: var(--tpl-cta-button-hover-ink, #fff);
}

/* P13 — normalize both branches emitted by Utils.createPicture(). */
html[data-template] picture {
  display: block;
}

/* P14 — values in unit cells are data-driven, not fixed mockup columns. */
html[data-template] .units-table td {
  font-variant-numeric: tabular-nums;
}