/* SherikTop unified color system
   Calm violet + warm neutral + trust green. All customer-facing pages use
   semantic roles from this file; environment.css remains responsible only
   for browser/Telegram safe areas. */

:root {
  color-scheme: light;
  --st-brand-900: #32164f;
  --st-brand-800: #47206f;
  --st-brand-700: #55278a;
  --st-brand-600: #6432a8;
  --st-brand-500: #7849b8;
  --st-brand-200: #d8c6e8;
  --st-brand-100: #e8dcf2;
  --st-brand-50: #f2ecf8;
  --st-ink: #1c1b20;
  --st-ink-soft: #3f3c44;
  --st-muted: #625e68;
  --st-muted-soft: #7a7680;
  --st-bg: #f8f7fa;
  --st-surface: #ffffff;
  --st-surface-soft: #f3f2f5;
  --st-surface-raised: #fcfbfd;
  --st-line: #e5e2e8;
  --st-line-strong: #d5d0d9;
  --st-success: #137a5b;
  --st-success-soft: #e7f5ef;
  --st-warning: #9a5b12;
  --st-warning-soft: #fff3dd;
  --st-danger: #b9384a;
  --st-danger-soft: #fdecef;
  --st-info: #3766a6;
  --st-info-soft: #eaf1fb;
  --st-focus: rgba(100, 50, 168, .22);
  --st-shadow-xs: 0 1px 2px rgba(28, 27, 32, .04);
  --st-shadow-sm: 0 6px 18px rgba(28, 27, 32, .06);
  --st-shadow-md: 0 14px 36px rgba(28, 27, 32, .09);

  /* Backward-compatible aliases while old component CSS is phased out. */
  --brand-900: var(--st-brand-900);
  --brand-800: var(--st-brand-800);
  --brand-700: var(--st-brand-700);
  --brand-600: var(--st-brand-600);
  --brand-500: var(--st-brand-500);
  --brand-400: var(--st-brand-500);
  --brand-300: var(--st-brand-200);
  --brand-200: var(--st-brand-200);
  --brand-100: var(--st-brand-100);
  --brand-50: var(--st-brand-50);
  --bg: var(--st-bg);
  --surface: rgba(255, 255, 255, .97);
  --surface-strong: var(--st-surface);
  --surface-soft: var(--st-surface-soft);
  --text: var(--st-ink);
  --text-soft: var(--st-ink-soft);
  --muted: var(--st-muted);
  --line: var(--st-line);
  --line-strong: var(--st-line-strong);
  --success: var(--st-success);
  --danger: var(--st-danger);
  --info: var(--st-info);
  --primary-grad: linear-gradient(135deg, var(--st-brand-700), var(--st-brand-600));
  --primary-grad-hover: linear-gradient(135deg, var(--st-brand-800), var(--st-brand-700));
  --shadow-sm: var(--st-shadow-xs);
  --shadow: var(--st-shadow-sm);
  --shadow-lg: var(--st-shadow-md);
  --app-bg-start: var(--st-bg);
  --app-bg-end: var(--st-bg);
  --app-accent-glow: transparent;
}

body,
body.home-page,
body.detail-page,
body.profile-page,
body.post-page,
body.my-page,
body.subscribe-page {
  color: var(--st-ink);
  background: var(--st-bg) !important;
}

body::before,
body::after { display: none !important; }

.app-shell,
body.detail-page .app-shell,
.experience-v2 .app-shell {
  background: var(--st-bg) !important;
}

::selection { background: var(--st-brand-100); color: var(--st-brand-900); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: 2px;
}

/* Shared headers and native-looking controls */
.app-header,
body.home-page .app-header,
body.detail-page .app-header.detail-topbar,
body.profile-page .app-header.compact,
body.post-page .app-header.compact,
.experience-v2 .app-header.product-header,
.experience-v2 .app-header.product-subheader {
  border-color: var(--st-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 1px 0 rgba(28, 27, 32, .05) !important;
  color: var(--st-ink) !important;
}

.header-action,
.detail-icon-btn,
.market-alert,
.market-location,
.experience-v2 .product-subheader .header-action {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-xs) !important;
  color: var(--st-brand-600) !important;
}

.market-alert { background: var(--st-brand-50) !important; }
.market-alert i { background: var(--st-danger) !important; }

/* Product layer aliases */
.experience-v2 {
  --product-purple: var(--st-brand-600);
  --product-purple-dark: var(--st-brand-800);
  --product-purple-soft: var(--st-brand-50);
  --product-ink: var(--st-ink);
  --product-muted: var(--st-muted);
  --product-line: var(--st-line);
  --product-bg: var(--st-bg);
  --product-card: var(--st-surface);
  --product-green: var(--st-success);
  --product-shadow: var(--st-shadow-sm);
  background: var(--st-bg) !important;
}

/* Home search and discovery */
.experience-v2.home-page,
.experience-v2.home-page .app-shell { background: var(--st-bg) !important; }

.experience-v2.home-page .search-card,
html.is-telegram-webapp .experience-v2.home-page .search-card,
html.is-tg-fullscreen .experience-v2.home-page .search-card {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-sm) !important;
}

.experience-v2.home-page .search-row {
  border-color: transparent !important;
  background: var(--st-surface-soft) !important;
}

.experience-v2.home-page .search-row input { color: var(--st-ink) !important; }
.experience-v2.home-page .search-row input::placeholder { color: var(--st-muted-soft) !important; opacity: 1; }
.experience-v2.home-page .search-leading-icon { color: var(--st-brand-600) !important; }

.experience-v2.home-page #filter-open,
.experience-v2.home-page .search-submit-inline {
  background: var(--st-brand-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.popular-searches-panel {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-md) !important;
}

.popular-search-chip,
.filter-chip,
.info-chips span,
.related-chip-row a {
  border-color: var(--st-line) !important;
  background: var(--st-surface-soft) !important;
  color: var(--st-ink-soft) !important;
}

.experience-v2.home-page .quick-filter {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  color: var(--st-muted) !important;
}

.experience-v2.home-page .quick-filter.is-active {
  border-color: var(--st-brand-600) !important;
  background: var(--st-brand-50) !important;
  color: var(--st-brand-800) !important;
}

.experience-v2.home-page .market-stat-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.10), transparent 38%),
    linear-gradient(135deg, var(--st-brand-800), var(--st-brand-600)) !important;
  box-shadow: 0 12px 28px rgba(71, 32, 111, .18) !important;
}

.experience-v2.home-page .market-post-card {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-xs) !important;
}

.experience-v2.home-page .market-post-card a,
.primary-btn,
.primary-link,
.call-btn,
.card-cta {
  border-color: var(--st-brand-600) !important;
  background: var(--st-brand-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Listing cards */
.card,
.experience-v2.home-page .card,
.profile-hero,
.profile-action,
.profile-saved,
.post-hero,
.post-flow,
.post-cta-panel,
.plan,
.state {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-sm) !important;
}

.card-price-title,
.card-body h3,
.results-heading strong,
.section-heading h3,
.profile-hero h2,
.profile-action span { color: var(--st-ink) !important; }

.location-row,
.results-heading div span,
.card-body p,
.post-hero > p,
.post-steps span,
.profile-hero p { color: var(--st-muted) !important; }

.image-wrap.compact-image .tag.audience,
body.detail-page .detail-hero .tag.listing-badge {
  background: rgba(28, 27, 32, .88) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.save-btn {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  color: var(--st-brand-600) !important;
}

.save-btn.is-saved {
  border-color: var(--st-brand-200) !important;
  background: var(--st-brand-50) !important;
  color: var(--st-brand-800) !important;
}

.live-indicator,
.post-trust-row span { color: var(--st-success) !important; }
.post-trust-row span { background: var(--st-success-soft) !important; }

/* Filters and form controls */
.sheet-backdrop { background: rgba(28, 27, 32, .32) !important; }
.filter-sheet {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: 0 -16px 42px rgba(28, 27, 32, .14) !important;
}

.filter-sheet input,
.filter-sheet select,
.filter-sheet textarea,
.post-page input,
.post-page select,
.post-page textarea {
  border-color: var(--st-line-strong) !important;
  background: var(--st-surface-raised) !important;
  color: var(--st-ink) !important;
}

.ghost-btn,
.plain-btn {
  border-color: var(--st-line) !important;
  background: var(--st-surface-soft) !important;
  color: var(--st-ink-soft) !important;
}

/* Detail page: calm surfaces, one conversion color. */
body.detail-page {
  --detail-purple: var(--st-brand-600);
  --detail-purple-dark: var(--st-ink);
  --detail-purple-soft: var(--st-brand-50);
  --detail-line: var(--st-line);
}

body.detail-page .detail-topbar-title h1,
body.detail-page .detail-heading-block h2,
body.detail-page .detail-facts > h3,
body.detail-page .detail-amenities h3,
body.detail-page .related-searches h3 { color: var(--st-ink) !important; }

body.detail-page .detail-summary-price { color: var(--st-brand-800) !important; }
body.detail-page .detail-summary-location { color: var(--st-muted) !important; }

body.detail-page .detail-hero {
  border-color: var(--st-line) !important;
  background: var(--st-surface-soft) !important;
  box-shadow: var(--st-shadow-md) !important;
}

body.detail-page .detail-hero .carousel-btn,
body.detail-page .detail-gallery-open {
  background: rgba(255,255,255,.94) !important;
  color: var(--st-ink) !important;
  box-shadow: var(--st-shadow-sm) !important;
}

body.detail-page .detail-grid,
body.detail-page .detail-amenities,
body.detail-page .related-searches {
  border-color: var(--st-line) !important;
  background: var(--st-surface) !important;
  box-shadow: var(--st-shadow-xs) !important;
}

body.detail-page .detail-info-card,
body.detail-page .detail-info-card.detail-info-wide {
  border-color: var(--st-line) !important;
  background: var(--st-surface-soft) !important;
  box-shadow: none !important;
}

body.detail-page .detail-info-card > span {
  background: var(--st-brand-50) !important;
  color: var(--st-brand-600) !important;
}

body.detail-page .detail-info-card small { color: var(--st-muted) !important; }
body.detail-page .detail-info-card strong { color: var(--st-ink) !important; }

body.detail-page .detail-amenity-chips li {
  border-color: var(--st-line) !important;
  background: var(--st-surface-raised) !important;
  color: var(--st-ink-soft) !important;
}

body.detail-page .detail-amenity-chips li span { color: var(--st-success) !important; }

body.detail-page .locked-phone {
  border-color: transparent !important;
  background: var(--st-brand-900) !important;
  box-shadow: 0 14px 30px rgba(50, 22, 79, .18) !important;
}

body.detail-page .locked-phone .call-btn {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--st-brand-800) !important;
}

/* Profile, post and subscription */
.product-eyebrow { color: var(--st-brand-600) !important; }
.post-hero-icon,
.step-icon,
.profile-avatar-fallback { background: var(--st-brand-50) !important; color: var(--st-brand-600) !important; }
.profile-avatar-fallback { background: var(--st-brand-600) !important; color: #fff !important; }
.profile-login-note { border-color: var(--st-brand-200) !important; background: var(--st-brand-50) !important; }
.profile-action .icon { color: var(--st-brand-600) !important; }
.profile-action strong { background: var(--st-brand-50) !important; color: var(--st-brand-800) !important; }
.plan.featured { border-color: var(--st-brand-600) !important; background: var(--st-brand-50) !important; }
.plan .badge { background: var(--st-brand-600) !important; color: #fff !important; }

/* Navigation */
body .bottom-nav,
body.experience-v2 .bottom-nav,
body.detail-page .bottom-nav {
  border-color: rgba(28, 27, 32, .09) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 28px rgba(28, 27, 32, .11) !important;
}

body .bottom-nav .bottom-nav-item { color: var(--st-muted) !important; }
body .bottom-nav .bottom-nav-item.is-active { background: transparent !important; color: var(--st-brand-800) !important; }
body .bottom-nav .bottom-nav-item.is-active .bottom-nav-icon { background: var(--st-brand-50) !important; color: var(--st-brand-600) !important; }
body .bottom-nav .bottom-nav-create .bottom-nav-icon { background: var(--st-brand-600) !important; color: #fff !important; }

/* Loading, messages and pagination */
.loading-avatar,
.loading-lines i,
.skeleton-block,
.skeleton-line,
.skeleton-grid span { background-color: var(--st-surface-soft) !important; }
.pagination-page,
.pagination-arrow,
.load-more { border-color: var(--st-line) !important; background: var(--st-surface) !important; color: var(--st-ink-soft) !important; }
.pagination-page.is-current { border-color: var(--st-brand-600) !important; background: var(--st-brand-600) !important; color: #fff !important; }
.state.error { border-color: #f5cbd2 !important; background: var(--st-danger-soft) !important; color: var(--st-danger) !important; }

@media (prefers-reduced-transparency: reduce) {
  .app-header,
  .bottom-nav,
  .search-card { background: var(--st-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}