/* SOT shared component layer — sot41 surface-aware
   Icons / buttons / modals / chips follow parent surface, not theme-light alone. */

:root {
  --sot-header-bg: var(--bg);
  --sot-footer-bg: color-mix(in srgb, var(--bg) 92%, var(--ink));
  --sot-modal-bg: var(--modal-bg);
  --sot-cta-bg: var(--btn-primary-bg);
  --sot-cta-ink: var(--btn-primary-ink);
  --sot-cta-hover: var(--btn-primary-hover);
  --sot-field-bg: var(--field-bg);
  --sot-field-ink: var(--field-ink);
  --sot-field-line: var(--line-strong);
}

html.theme-dark,
html[data-theme="dark"],
[data-theme="inverse"],
.theme-dark {
  --sot-header-bg: var(--bg);
  --sot-footer-bg: color-mix(in srgb, var(--bg) 90%, var(--ink));
}

/* ——— Page shell ——— */
html,
body {
  background-color: var(--bg);
  color: var(--ink);
}

app-root > div.min-h-screen {
  color: inherit;
}

[class*="text-[#f5f0e6]"],
[class*="text-[#f4efe6]"] {
  color: var(--msg-cream) !important;
}

[class*="text-[#a8a29e]"],
[class*="text-[#78716c]"],
[class*="text-[#57534e]"] {
  color: var(--ink-muted) !important;
}

[class*="text-[#c59b4e]"],
[class*="text-[#dfbe7e]"],
[class*="text-[#d4a84b]"] {
  color: var(--accent) !important;
}

[class*="border-[#c59b4e]"],
[class*="border-[#dfbe7e]"] {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* ——— Header ——— */
header,
.app-header,
.site-header,
.uk-head header,
app-header > header {
  background: var(--sot-header-bg) !important;
  background-color: var(--sot-header-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
  color: var(--ink) !important;
  z-index: var(--z-header);
  transition: background var(--transition-smooth), border-color var(--transition-fast), color var(--transition-fast);
}

/* lux-light remaps header to cream — keep ink readable */
html.lux-light header,
html.lux-light app-header > header {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}

header a,
.site-header a,
.uk-head a,
app-header a {
  color: inherit;
  transition: color var(--transition-fast);
}

header a:hover,
.site-header a:hover,
app-header a:hover {
  color: var(--accent);
}

app-header nav button,
header nav button {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

app-header nav button:hover,
header nav button:hover {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
}

/* ——— Footer ——— */
footer,
.site-footer,
app-footer footer,
app-footer > footer {
  background: var(--sot-footer-bg) !important;
  background-color: var(--sot-footer-bg) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}

footer a,
.site-footer a,
app-footer a {
  color: var(--ink-muted);
  transition: color var(--transition-fast);
}

footer a:hover,
.site-footer a:hover,
app-footer a:hover {
  color: var(--accent);
}

/* ——— Surfaces / booking bar ——— */
.card,
.panel,
.surface,
.booking-engine-bar,
.lux-select__list,
.booking-bar {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ——— Modals: isolated theme (dark-inverse on dark hosts) ——— */
[role="dialog"],
.modal,
.uk-modal,
app-reservation-modal,
app-chale-booking,
app-quiz-modal,
app-lead-modal {
  z-index: var(--z-modal);
  --modal-bg: var(--surface-overlay);
  --modal-ink: var(--ink);
  --modal-muted: var(--ink-muted);
  --field-bg: var(--input-bg);
  --field-ink: var(--ink);
  --field-placeholder: var(--ink-faint);
  --sot-modal-bg: var(--modal-bg);
  --sot-field-bg: var(--field-bg);
  --sot-field-ink: var(--field-ink);
  --sot-cta-bg: var(--btn-primary-bg);
  --sot-cta-ink: var(--btn-primary-ink);
  --sot-cta-hover: var(--btn-primary-hover);
  color: var(--modal-ink);
  font-family: var(--font-sans);
}

/* Dark hosts: force modal to dark-inverse (no white panel + dark inputs) */
html.theme-dark [role="dialog"],
html[data-theme="dark"] [role="dialog"],
html.theme-dark app-reservation-modal,
html[data-theme="dark"] app-reservation-modal,
html.theme-dark app-lead-modal,
html[data-theme="dark"] app-lead-modal,
html.theme-dark .uk-modal,
html[data-theme="dark"] .uk-modal,
html.theme-dark .lead-modal,
html[data-theme="dark"] .lead-modal,
html.theme-dark .modal,
html[data-theme="dark"] .modal {
  --bg: hsl(30, 14%, 7%);
  --surface: hsl(30, 12%, 11%);
  --surface-raised: hsl(30, 10%, 15%);
  --surface-overlay: hsl(30, 12%, 13%);
  --ink: hsl(40, 28%, 94%);
  --ink-muted: hsl(35, 14%, 68%);
  --ink-faint: hsl(30, 10%, 48%);
  --accent: hsl(42, 55%, 68%);
  --accent-ink: hsl(30, 12%, 10%);
  --input-bg: hsl(30, 10%, 15%);
  --field-bg: hsl(30, 10%, 15%);
  --field-ink: hsl(40, 28%, 94%);
  --field-placeholder: hsl(30, 10%, 48%);
  --modal-bg: hsl(30, 12%, 13%);
  --modal-ink: hsl(40, 28%, 94%);
  --modal-muted: hsl(35, 14%, 68%);
  --btn-primary-bg: hsl(42, 55%, 68%);
  --btn-primary-ink: hsl(30, 12%, 10%);
  --btn-primary-hover: hsl(42, 52%, 74%);
  --chip-on-bg: hsl(42, 55%, 68%);
  --chip-on-ink: hsl(30, 12%, 10%);
  --line: color-mix(in srgb, hsl(40, 28%, 94%) 14%, transparent);
  --line-strong: color-mix(in srgb, hsl(40, 28%, 94%) 28%, transparent);
  --sot-modal-bg: var(--modal-bg);
  --sot-field-bg: var(--field-bg);
  --sot-field-ink: var(--field-ink);
  --sot-cta-bg: var(--btn-primary-bg);
  --sot-cta-ink: var(--btn-primary-ink);
  --sot-cta-hover: var(--btn-primary-hover);
}

[role="dialog"],
[role="dialog"] > div,
.modal__panel,
.uk-modal__panel,
.uk-modal__card,
.modal-card,
.lead-modal,
.reservation-modal,
.uk-modal .uk-modal__card,
[role="dialog"].uk-modal__card,
[role="dialog"] .bg-white,
[role="dialog"] [class*="bg-white"],
[role="dialog"] [class*="bg-[#fff"],
[role="dialog"] [class*="bg-[#f"],
app-lead-modal [class*="bg-white"],
app-reservation-modal [class*="bg-white"] {
  background: var(--sot-modal-bg) !important;
  background-color: var(--sot-modal-bg) !important;
  color: var(--modal-ink) !important;
  border-color: var(--line-strong) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  font-family: var(--font-sans);
}

html.theme-dark .uk-modal__card,
html[data-theme="dark"] .uk-modal__card,
html.theme-dark [role="dialog"],
html[data-theme="dark"] [role="dialog"] {
  background: hsl(30, 12%, 13%) !important;
  background-color: hsl(30, 12%, 13%) !important;
  color: hsl(40, 28%, 94%) !important;
}

.modal-backdrop,
.backdrop,
.lead-open::before {
  background: var(--backdrop-scrim);
  z-index: var(--z-modal-backdrop);
}

/* Modal typography */
[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] .modal-title,
app-reservation-modal h2,
app-lead-modal h2 {
  font-family: var(--font-sans) !important;
  color: var(--modal-ink) !important;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}

[role="dialog"] p,
[role="dialog"] .modal-sub,
app-reservation-modal p,
app-lead-modal p {
  color: var(--modal-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm);
}

/* Close button */
[role="dialog"] button[aria-label*="Close"],
[role="dialog"] button[aria-label*="закры"],
[role="dialog"] .modal-close,
[role="dialog"] [class*="close"] {
  color: var(--ink-muted) !important;
}

[role="dialog"] button[aria-label*="Close"]:hover,
[role="dialog"] .modal-close:hover {
  color: var(--ink) !important;
}

/* ——— Forms (page + modal share field tokens) ——— */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea,
.form-input,
.form-control,
.lux-date,
.lux-select__btn,
.booking-field input,
.booking-field select,
[role="dialog"] input,
[role="dialog"] select,
[role="dialog"] textarea,
app-reservation-modal input,
app-reservation-modal select,
app-reservation-modal textarea,
app-lead-modal input,
app-lead-modal select,
app-lead-modal textarea {
  background: var(--sot-field-bg) !important;
  background-color: var(--sot-field-bg) !important;
  color: var(--sot-field-ink) !important;
  border: 1px solid var(--sot-field-line) !important;
  border-radius: var(--radius) !important;
  min-height: var(--input-height);
  padding-left: var(--input-pad-x);
  padding-right: var(--input-pad-x);
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input::placeholder,
textarea::placeholder,
[role="dialog"] input::placeholder,
[role="dialog"] textarea::placeholder {
  color: var(--field-placeholder) !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-control:focus,
.lux-select__btn:focus,
[role="dialog"] input:focus,
[role="dialog"] select:focus,
[role="dialog"] textarea:focus {
  outline: none !important;
  border-color: var(--line-focus) !important;
  box-shadow: var(--focus-ring) !important;
}

label,
.form-label,
.booking-field__label,
[role="dialog"] label,
app-reservation-modal label,
app-lead-modal label {
  color: var(--accent) !important;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-family: var(--font-sans) !important;
}

/* ——— Primary CTA ——— */
.cta-gold,
.btn-primary,
.btn-book-submit,
button.cta-gold,
a.cta-gold,
.btn-lux-primary,
[role="dialog"] button[type="submit"],
[role="dialog"] .btn-primary,
app-reservation-modal button[type="submit"],
app-lead-modal button[type="submit"],
.booking-engine-bar button[type="submit"] {
  background: var(--sot-cta-bg) !important;
  background-color: var(--sot-cta-bg) !important;
  color: var(--sot-cta-ink) !important;
  border-color: var(--sot-cta-bg) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-sans) !important;
  transition: background var(--transition-smooth), color var(--transition-fast), transform var(--transition-transform);
}

.cta-gold:hover,
.btn-primary:hover,
.btn-book-submit:hover,
button.cta-gold:hover,
a.cta-gold:hover,
.btn-lux-primary:hover,
[role="dialog"] button[type="submit"]:hover,
app-reservation-modal button[type="submit"]:hover,
app-lead-modal button[type="submit"]:hover {
  background: var(--sot-cta-hover) !important;
  background-color: var(--sot-cta-hover) !important;
  color: var(--sot-cta-ink) !important;
}

.cta-gold:active,
.btn-primary:active,
[role="dialog"] button[type="submit"]:active {
  background: var(--btn-primary-active) !important;
  color: var(--sot-cta-ink) !important;
}

/* Kill grey/dead modal submit (lux remaps) */
html.lux-light [role="dialog"] button[type="submit"],
html.lux-light app-lead-modal button[type="submit"],
html.lux-light [role="dialog"] .btn-primary,
[role="dialog"] button[class*="bg-gray"],
[role="dialog"] button[class*="bg-stone"],
[role="dialog"] button[class*="bg-[#a"],
[role="dialog"] button[class*="bg-[#9"],
[role="dialog"] button[class*="bg-[#8"] {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-ink) !important;
}

/* Secondary CTA on dark concierge card */
[class*="from-[#221c15]"] button[class*="bg-[#1c1815]"],
[class*="from-[#221c15]"] a[class*="bg-[#1c1815]"],
.section-gastro button[class*="bg-[#1c1815]"] {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  color: var(--btn-secondary-ink) !important;
  border-color: var(--btn-secondary-border) !important;
}

[class*="from-[#221c15]"] button[class*="bg-[#1c1815]"]:hover,
.section-gastro button[class*="bg-[#1c1815]"]:hover {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--accent) !important;
}

/* ——— Chips / loyalty tiers (grid, not role=group) — NOT submit ——— */
[role="dialog"] form .grid button:not([type="submit"]),
[role="dialog"] .tier-btn,
[role="dialog"] .club-tier,
.loyalty-chip,
.tier-chip {
  background: var(--chip-bg) !important;
  color: var(--chip-ink) !important;
  border-color: var(--line) !important;
  font-family: var(--font-sans) !important;
}

/* Selected gold chip: dark ink on gold (never text-white) */
html body [role="dialog"] form .grid button:not([type="submit"])[class*="bg-[#c59b4e]"],
html body [role="dialog"] form .grid button:not([type="submit"])[class*="bg-[#dfbe7e]"],
html body [role="dialog"] button:not([type="submit"])[class*="bg-[#c59b4e]"],
html body [role="dialog"] button:not([type="submit"])[class*="bg-[#dfbe7e]"],
.loyalty-chip.is-on,
.tier-chip.is-on {
  background: var(--chip-on-bg) !important;
  background-color: var(--chip-on-bg) !important;
  color: var(--chip-on-ink) !important;
}

/* Explicit modal submit wins over any chip bleed */
[role="dialog"] button[type="submit"],
app-reservation-modal button[type="submit"],
app-lead-modal button[type="submit"] {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-ink) !important;
  border-color: var(--btn-primary-bg) !important;
}

/* ——— Messenger / socials — surface-aware ——— */

/* Default on light pages: dark ink glyphs */
.header-socials,
.messenger-socials {
  --msg-tg: var(--msg-on-light);
  --msg-max: var(--msg-on-light);
  --msg-cutout: var(--msg-cutout-on-light);
  --msg-ring: var(--msg-hover);
}

/* Light surfaces: lux-light header, theme-light, footer on light host */
html.lux-light header .header-socials,
html.lux-light header .messenger-socials,
html.lux-light footer .header-socials,
html.lux-light footer .messenger-socials,
html.lux-light app-footer .header-socials,
html.lux-light app-footer .messenger-socials,
header.theme-light .header-socials,
header.theme-light .messenger-socials,
html[data-theme="light"] footer .header-socials,
html[data-theme="light"] footer .messenger-socials,
html[data-theme="light"] header .header-socials,
html[data-theme="light"] header .messenger-socials {
  --msg-tg: var(--msg-on-light) !important;
  --msg-max: var(--msg-on-light) !important;
  --msg-cutout: var(--msg-cutout-on-light) !important;
  --msg-ring: var(--msg-hover) !important;
}

/* Dark surface islands (concierge gradient) */
.section-gastro .messenger-socials,
.section-gastro .header-socials,
[class*="from-[#221c15]"] .messenger-socials,
[class*="from-[#221c15]"] .header-socials {
  --msg-tg: var(--msg-on-dark) !important;
  --msg-max: var(--msg-on-dark) !important;
  --msg-cutout: var(--msg-cutout-on-dark) !important;
  --msg-ring: var(--msg-hover) !important;
}

/* Full dark hosts */
html.theme-dark .header-socials,
html.theme-dark .messenger-socials,
html[data-theme="dark"] .header-socials,
html[data-theme="dark"] .messenger-socials,
html.theme-dark footer .header-socials,
html.theme-dark footer .messenger-socials,
html[data-theme="dark"] footer .header-socials,
html[data-theme="dark"] footer .messenger-socials {
  --msg-tg: var(--msg-on-dark) !important;
  --msg-max: var(--msg-on-dark) !important;
  --msg-cutout: var(--msg-cutout-on-dark) !important;
  --msg-ring: var(--msg-hover) !important;
}

html body .header-socials .tg .icon-body,
html body .messenger-socials .tg .icon-body {
  fill: var(--msg-tg) !important;
  transition: fill var(--transition-smooth);
}

html body .header-socials .max .icon-body,
html body .messenger-socials .max .icon-body {
  fill: var(--msg-max) !important;
  transition: fill var(--transition-smooth);
}

html body .header-socials .social-btn:not(.tg):not(.max) .icon-body,
html body .messenger-socials .social-btn:not(.tg):not(.max) .icon-body {
  fill: var(--msg-tg) !important;
}

html body .header-socials .icon-cutout,
html body .messenger-socials .icon-cutout {
  fill: var(--msg-cutout) !important;
  transition: fill var(--transition-smooth);
}

html body .header-socials .tg:hover .icon-body,
html body .header-socials .max:hover .icon-body,
html body .messenger-socials .tg:hover .icon-body,
html body .messenger-socials .max:hover .icon-body,
html body .header-socials .social-btn:hover .icon-body,
html body .messenger-socials .social-btn:hover .icon-body {
  fill: var(--msg-hover) !important;
}

html body .header-socials .social-btn:hover .icon-cutout,
html body .messenger-socials .social-btn:hover .icon-cutout,
html body .header-socials .tg:hover .icon-cutout,
html body .messenger-socials .tg:hover .icon-cutout,
html body .header-socials .max:hover .icon-cutout,
html body .messenger-socials .max:hover .icon-cutout {
  fill: var(--msg-cutout) !important;
}

html body .header-socials .social-btn::before,
html body .messenger-socials .social-btn::before {
  border-color: var(--msg-ring) !important;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

/* Beat theme.css icon-v2 hardcoded fills */
html.icon-v2 .social-btn.tg .icon-body,
html.icon-v1 .social-btn.tg .icon-body,
html.icon-v2 .social-btn.max .icon-body,
html.icon-v1 .social-btn.max .icon-body {
  fill: var(--msg-tg) !important;
}

html.icon-v2 .social-btn.max .icon-body {
  fill: var(--msg-max) !important;
}

html.icon-v2 .social-btn:hover .icon-body,
html.icon-v1 .social-btn:hover .icon-body {
  fill: var(--msg-hover) !important;
}

/* ——— Typography helpers ——— */
h1, .text-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
h2, .text-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--ink); }
h3, .text-h3 { font-family: var(--font-sans); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--ink); }

.sot-container,
.max-w-7xl {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}