/* Landing live surface only — maps semantic tokens (--ce-*) from color_engine. */
/* color-engine-v9-token-specific-visible-proof */

:root {
  --ce-background-primary: #f6f7fb !important;
  --ce-background-secondary: #ffffff !important;
  --ce-text-primary: #1a1d26 !important;
  --ce-text-secondary: #5c6370 !important;
  --ce-button-primary: #2563eb !important;
  --ce-button-hover: #1d4ed8 !important;
  --ce-border-soft: #e2e6ef !important;
  --ce-icon-primary: #334155 !important;
  --ce-heading-primary: #0f172a !important;
  --ce-link-primary: #2563eb !important;
  --ce-link-hover: #1e40af !important;
  --ce-overlay-background: rgba(15, 23, 42, 0.45) !important;
  --ce-popup-background: #ffffff !important;
  --ce-card-background: #ffffff !important;
  --ce-accent-primary: #7c3aed !important;
  --ce-navigation-surface: #ffffff !important;
  --ce-hero-surface: #eef2ff !important;
  --ce-icons-section-surface: #f8fafc !important;
  --ce-cards-section-surface: #f1f5f9 !important;
  --ce-contact-section-surface: #0f172a !important;
}
.app-layout--live .main-content {
  background: var(--ce-background-primary);
  color: var(--ce-text-primary);
}

.app-layout--live .site-header {
  background: var(--ce-navigation-surface, transparent);
  color: var(--ce-heading-primary);
}

.app-layout--live .site-header .logo {
  color: var(--ce-accent-primary);
}

.app-layout--live .hero-media {
  background: var(--ce-hero-surface);
}

.app-layout--live [data-aileen-site-block="section_hero"].aileen-landing-block,
.app-layout--live [data-aileen-site-block="section_hero"] {
  background: var(--ce-card-background, #ffffff);
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.app-layout--live #icons-bar-section,
.app-layout--live [data-aileen-site-block="section_icons"] {
  background: var(--ce-card-background, #ffffff);
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flow-root;
  padding-top: 0;
}

.app-layout--live #icons-bar-section > .category-buttons,
.app-layout--live [data-aileen-site-block="section_icons"] > .category-buttons {
  padding-top: 18px;
}

.app-layout--live #icons-bar-section .category-buttons .icon-grid,
.app-layout--live [data-aileen-site-block="section_icons"] .category-buttons .icon-grid {
  margin-top: 0;
}

.app-layout--live .page-shell {
  background: var(--ce-card-background, #ffffff);
  margin-bottom: 0;
}

.app-layout--live .page-shell + #icons-bar-section,
.app-layout--live .page-shell + [data-aileen-site-block="section_icons"],
.app-layout--live [data-aileen-site-block="section_hero"] + #icons-bar-section,
.app-layout--live [data-aileen-site-block="section_hero"] + [data-aileen-site-block="section_icons"] {
  margin-top: 0;
}

.app-layout--live #cards-section,
.app-layout--live .cards-section-anchor {
  background: var(--ce-cards-section-surface);
}

.app-layout--live [data-aileen-site-block="section_contact"] {
  border-top: 4px solid var(--ce-contact-section-surface, var(--ce-border-soft, transparent));
}

.app-layout--live .icon .aleen-live-icon-caption {
  color: var(--ce-text-secondary);
}

.app-layout--live .icon .aleen-live-icon-mark {
  color: var(--ce-icon-primary);
}

.app-layout--live .cards > div,
.app-layout--live .info-card {
  background: var(--ce-card-background);
  color: var(--ce-text-primary);
}

.app-layout--live .cards .content-card p {
  color: var(--ce-text-secondary);
}

.app-layout--live .cards .content-card h3 {
  color: var(--ce-heading-primary);
}

/* Contact Details: always a light surface so text stays readable (token may be a dark surface). */
.app-layout--live #contactSection.contact-card {
  background: var(--ce-popup-background, var(--popup-background, #ffffff));
  color: var(--ce-text-primary, #1f1f2e);
}

.app-layout--live #contactSection.contact-card h3,
.app-layout--live #contactSection.contact-card .contact-lead {
  color: var(--ce-text-secondary, #475569);
}

.app-layout--live .cta-btn {
  background: var(--ce-button-primary);
  color: var(--ce-popup-background, var(--popup-background, #ffffff));
}

.app-layout--live .cta-btn:hover {
  background: var(--ce-button-hover);
}

.app-layout--live #contactSection.contact-card .cta-btn,
.app-layout--live #contactSection.contact-card .cta-btn:hover {
  background: var(--ce-button-primary, #6f45c8) !important;
  color: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
  border-color: var(--ce-button-primary, #6f45c8) !important;
}

#contact,
#contactSection,
.contact-section,
.contact-details,
[data-section-id="contact"],
[data-section="contact"] {
  background: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
  color: var(--ce-text-primary, #1f1f2e) !important;
}

#contact *,
#contactSection *,
.contact-section *,
.contact-details *,
[data-section-id="contact"] *,
[data-section="contact"] * {
  color: inherit;
}

#contact a,
#contactSection a,
.contact-section a,
.contact-details a,
[data-section-id="contact"] a,
[data-section="contact"] a {
  color: var(--ce-link-primary, #4f2dbd) !important;
  text-decoration-color: var(--ce-link-primary, #4f2dbd) !important;
}

#contact a.cta-btn,
#contactSection a.cta-btn,
.contact-section a.cta-btn,
.contact-details a.cta-btn,
[data-section-id="contact"] a.cta-btn,
[data-section="contact"] a.cta-btn {
  color: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
  text-decoration-color: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
}

#contact button,
#contact .btn,
#contactSection button,
#contactSection .btn,
.contact-section button,
.contact-section .btn,
.contact-details button,
.contact-details .btn,
[data-section-id="contact"] button,
[data-section-id="contact"] .btn,
[data-section="contact"] button,
[data-section="contact"] .btn {
  background: var(--ce-button-primary, #6f45c8) !important;
  color: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
  border-color: var(--ce-button-primary, #6f45c8) !important;
}

.app-layout--live .text-sections,
.app-layout--live .container {
  color: var(--ce-text-primary);
}

.app-layout--live .budget-selector {
  background: var(--ce-card-background);
  border-color: var(--ce-border-soft);
}

.app-layout--live .budget-selector .main-btn {
  background: var(--ce-background-secondary);
  color: var(--ce-text-primary);
}

.app-layout--live .budget-selector .main-btn:hover {
  background: var(--ce-icons-section-surface);
  color: var(--ce-heading-primary);
}

/* Consume link_primary / link_hover tokens on anchors (css_variable_rule + live hover parity) */
.app-layout--live a {
  color: var(--ce-link-primary, var(--link-primary, inherit));
}

.app-layout--live a:hover,
.app-layout--live .main-content a:hover,
.app-layout--live #mainContent a:hover,
.app-layout--live .site-link:hover,
.app-layout--live .editor-link:hover {
  color: var(--ce-link-hover, var(--link-hover, inherit));
}

/* Modal shell may sit on body (editor); use canonical + alias vars from color_engine live apply */
#slide-modal .modal-content {
  background: var(--ce-popup-background, var(--popup-background, #ffffff));
}

body [data-aileen-site-block="section_contact"],
body [data-section-id="section_contact"] {
  --ce-section-background: #f5f8ff;
  background-color: #f5f8ff !important;
}