/* ==========================================================================
   Theme variants — переключаются через [data-theme] на <html>.
   Каждая тема переопределяет полную палитру. Базовая = forest (в variables.css).
   ========================================================================== */

/* ---------- MARINE: глубокий синий + латунь ------------------------------ */
[data-theme="marine"] {
  --color-primary-50:  #F0F4F9;
  --color-primary-100: #D9E3F0;
  --color-primary-200: #B1C5DD;
  --color-primary-300: #88A3C5;
  --color-primary-400: #5A7DA6;
  --color-primary-500: #3D5C87;
  --color-primary-600: #2E4A72;
  --color-primary-700: #1E3A5F;
  --color-primary-800: #142A47;
  --color-primary-900: #0C1E33;

  --color-primary:        var(--color-primary-700);
  --color-primary-hover:  var(--color-primary-600);
  --color-primary-active: var(--color-primary-800);

  --color-accent-300: #E8D4A8;
  --color-accent-400: #D9B374;
  --color-accent-500: #C9914A;
  --color-accent-600: #A87930;
  --color-accent-700: #7E5921;
  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-active: var(--color-accent-700);

  --color-bg:      #F4F2EE;
  --color-bg-soft: #F9F7F2;
  --color-scrim:        rgba(12, 30, 51, 0.55);
  --color-overlay-soft: rgba(12, 30, 51, 0.35);
  --shadow-focus: 0 0 0 3px rgba(30, 58, 95, 0.25);
}

/* ---------- TERRACOTTA: тёплая земля ------------------------------------- */
[data-theme="terracotta"] {
  --color-primary-50:  #FAF1EC;
  --color-primary-100: #F4DDD0;
  --color-primary-200: #E5B89B;
  --color-primary-300: #D38F66;
  --color-primary-400: #BC6F40;
  --color-primary-500: #AB6234;
  --color-primary-600: #8C4F2A;
  --color-primary-700: #A0522D;
  --color-primary-800: #7C3D1E;
  --color-primary-900: #582910;

  --color-primary:        var(--color-primary-700);
  --color-primary-hover:  var(--color-primary-600);
  --color-primary-active: var(--color-primary-800);

  --color-accent-300: #F1DCC0;
  --color-accent-400: #ECCBA4;
  --color-accent-500: #E8C39E;
  --color-accent-600: #C99E72;
  --color-accent-700: #946F4A;
  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-active: var(--color-accent-700);

  --color-bg:      #F7F0E8;
  --color-bg-soft: #FBF6EF;
  --color-scrim:        rgba(88, 41, 16, 0.55);
  --color-overlay-soft: rgba(88, 41, 16, 0.35);
  --shadow-focus: 0 0 0 3px rgba(160, 82, 45, 0.25);
}

/* ---------- ANTHRACITE: тёплый графит + шампань-золото ------------------- */
[data-theme="anthracite"] {
  --color-primary-50:  #F4F4F5;
  --color-primary-100: #E0E1E3;
  --color-primary-200: #B5B7BB;
  --color-primary-300: #888C92;
  --color-primary-400: #5C6168;
  --color-primary-500: #4A5057;
  --color-primary-600: #3D484F;
  --color-primary-700: #2C3539;
  --color-primary-800: #1F262A;
  --color-primary-900: #14181B;

  --color-primary:        var(--color-primary-700);
  --color-primary-hover:  var(--color-primary-600);
  --color-primary-active: var(--color-primary-800);

  --color-accent-300: #E5DAB6;
  --color-accent-400: #D4BE8C;
  --color-accent-500: #C9A961;
  --color-accent-600: #A88A4A;
  --color-accent-700: #7C6432;
  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-active: var(--color-accent-700);

  --color-bg:      #F2F1EE;
  --color-bg-soft: #F8F7F4;
  --color-scrim:        rgba(20, 24, 27, 0.55);
  --color-overlay-soft: rgba(20, 24, 27, 0.35);
  --shadow-focus: 0 0 0 3px rgba(44, 53, 57, 0.25);
}

/* ---------- BURGUNDY: бордо + слоновая кость ----------------------------- */
[data-theme="burgundy"] {
  --color-primary-50:  #F8EFF0;
  --color-primary-100: #EBD3D6;
  --color-primary-200: #D49AA0;
  --color-primary-300: #B86570;
  --color-primary-400: #964450;
  --color-primary-500: #823541;
  --color-primary-600: #8C3A45;
  --color-primary-700: #722F37;
  --color-primary-800: #5A2128;
  --color-primary-900: #3F151A;

  --color-primary:        var(--color-primary-700);
  --color-primary-hover:  var(--color-primary-600);
  --color-primary-active: var(--color-primary-800);

  --color-accent-300: #EFE3CB;
  --color-accent-400: #E5D4B3;
  --color-accent-500: #DDC9A3;
  --color-accent-600: #BFA882;
  --color-accent-700: #8E7B57;
  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-active: var(--color-accent-700);

  --color-bg:      #F6EFEC;
  --color-bg-soft: #FAF5F2;
  --color-scrim:        rgba(63, 21, 26, 0.55);
  --color-overlay-soft: rgba(63, 21, 26, 0.35);
  --shadow-focus: 0 0 0 3px rgba(114, 47, 55, 0.25);
}

/* ==========================================================================
   Font variants — переключаются через [data-font] на <html>.
   Базовая = playfair (Playfair Display + Inter).
   ========================================================================== */

[data-font="manrope"] {
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
[data-font="manrope"] h1, [data-font="manrope"] h2,
[data-font="manrope"] h3, [data-font="manrope"] h4 {
  letter-spacing: -0.025em;
  font-weight: 700;
}

[data-font="cormorant"] {
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
[data-font="cormorant"] h1, [data-font="cormorant"] h2 { font-weight: 600; }

[data-font="unbounded"] {
  --font-display: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
[data-font="unbounded"] h1, [data-font="unbounded"] h2,
[data-font="unbounded"] h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Theme switcher panel UI — НЕ ВЫВОДИТСЯ В ПРОДЕ если в HTML нет элемента.
   ========================================================================== */

.theme-switcher {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 950;
  font-family: var(--font-body);
  transition: bottom var(--t-base);
}
/* пока показывается cookie-banner — поднимаем переключатель чтобы не перекрывались */
.cookie-visible .theme-switcher { bottom: 100px; }
@media (min-width: 1024px) {
  .cookie-visible .theme-switcher { bottom: var(--space-4); }   /* на десктопе cookie справа, не мешает */
}

.theme-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 10px 16px 10px 12px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.theme-switcher__toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.theme-switcher__toggle .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg-alt);
  outline: 1px solid var(--color-border);
}

.theme-switcher__panel {
  position: absolute;
  left: 0; bottom: calc(100% + var(--space-3));
  width: 320px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
  display: none;
  flex-direction: column;
  gap: var(--space-5);
}
.theme-switcher[data-open="true"] .theme-switcher__panel { display: flex; }
.theme-switcher[data-open="true"] .theme-switcher__toggle { box-shadow: var(--shadow-lg); }

.theme-switcher__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.theme-switcher__head h4 {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.theme-switcher__head .ts-close {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.theme-switcher__head .ts-close:hover { background: var(--color-bg); color: var(--color-text); }

.theme-switcher__group { display: flex; flex-direction: column; gap: var(--space-3); }
.theme-switcher__label {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.theme-switcher__colors {
  display: flex; gap: var(--space-2);
}
.theme-switcher__color {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-alt);
  outline: 1px solid var(--color-border);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.theme-switcher__color:hover { transform: scale(1.1); }
.theme-switcher__color[aria-pressed="true"] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.theme-switcher__color[aria-pressed="true"]::after {
  content: "";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.theme-switcher__select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  color: var(--color-text);
  cursor: pointer;
}

.theme-switcher__hide-btn {
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
}
.theme-switcher__hide-btn:hover { color: var(--color-error); border-color: var(--color-error); }

.theme-switcher__hint {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

/* mobile */
@media (max-width: 479.98px) {
  .theme-switcher__panel { width: calc(100vw - var(--space-8)); }
}

/* don't print or screenshot */
@media print { .theme-switcher { display: none !important; } }

/* ==========================================================================
   Лёгкий тематический tint на крупных фото (hero, cta-strip, page-hero).
   Создаёт ощущение что фото «в одной палитре». Без перегруза.
   ========================================================================== */
.hero__media,
.cta-strip__media {
  position: relative;
}
.hero__media::after,
.cta-strip__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity var(--t-slow);
  background: var(--color-primary-700);
}

[data-theme="marine"]     .hero__media::after,
[data-theme="marine"]     .cta-strip__media::after,
[data-theme="terracotta"] .hero__media::after,
[data-theme="terracotta"] .cta-strip__media::after,
[data-theme="anthracite"] .hero__media::after,
[data-theme="anthracite"] .cta-strip__media::after,
[data-theme="burgundy"]   .hero__media::after,
[data-theme="burgundy"]   .cta-strip__media::after {
  opacity: 0.12;
}

/* page-hero (внутренние страницы) — фон уже в primary, но цифры контрастят */
.page-hero { background: var(--color-primary); }