/* VESSO color system. This layer intentionally changes colors only. */
:root {
  color-scheme: light;
  --vesso-primary: #063f38;
  --vesso-primary-hover: #0a5b50;
  --vesso-accent: #18cdb7;
  --vesso-accent-strong: #0ca78f;
  --vesso-accent-soft: #e4f7f3;
  --vesso-blue: #4f82a8;
  --vesso-blue-soft: #e9f1f7;
  --vesso-bg: #f4f7f6;
  --vesso-bg-alt: #eef3f1;
  --vesso-surface: #ffffff;
  --vesso-surface-soft: #f7faf9;
  --vesso-border: #d8e2df;
  --vesso-border-strong: #c3d2ce;
  --vesso-text: #172825;
  --vesso-heading: #063f38;
  --vesso-muted: #5b6f6a;
  --vesso-shadow: 0 18px 50px rgba(23, 40, 37, 0.08);
  --vesso-shadow-soft: 0 10px 28px rgba(23, 40, 37, 0.06);

  /* Aliases used by the existing public, admin and portal styles. */
  --ink: var(--vesso-text);
  --text: var(--vesso-text);
  --muted: var(--vesso-muted);
  --deep: var(--vesso-primary);
  --deep-2: #052f2a;
  --mint: var(--vesso-accent);
  --mint-bright: var(--vesso-accent);
  --mint-soft: #c9f3ed;
  --green: var(--vesso-accent-strong);
  --green-2: var(--vesso-accent);
  --green-dark: var(--vesso-primary);
  --blue: var(--vesso-blue);
  --violet: var(--vesso-blue);
  --line: var(--vesso-border);
  --line-strong: var(--vesso-border-strong);
  --panel: var(--vesso-surface);
  --panel-soft: var(--vesso-surface-soft);
  --paper: var(--vesso-surface);
  --mist: var(--vesso-bg-alt);
  --white: var(--vesso-surface);
  --bg: var(--vesso-bg);
  --bg-2: var(--vesso-bg-alt);
  --shadow: var(--vesso-shadow);
  --shadow-soft: var(--vesso-shadow-soft);

  --ui-focus: #0b7c68;
  --ui-mint: var(--vesso-accent);
  --ui-deep: var(--vesso-primary);
  --ui-text: var(--vesso-text);
  --ui-muted: var(--vesso-muted);
  --ui-line: var(--vesso-border);
  --ui-soft: var(--vesso-surface-soft);

  --partner-ink: var(--vesso-text);
  --partner-muted: var(--vesso-muted);
  --partner-green: #0b7c68;
  --partner-green-dark: var(--vesso-primary);
  --partner-mint: var(--vesso-accent);
  --partner-line: var(--vesso-border);
  --partner-soft: var(--vesso-surface-soft);
  --partner-white: var(--vesso-surface);
}

html body {
  color: var(--vesso-text) !important;
  background: linear-gradient(180deg, #f8faf9 0%, var(--vesso-bg) 100%) !important;
}

body::before {
  background: none !important;
  opacity: 0 !important;
}

a {
  color: #0b7c68;
}

h1,
h2,
h3,
h4,
.page-title h1,
.section-title,
.object-title,
.group-card-title,
.stats-card h3 {
  color: var(--vesso-heading);
}

.muted,
.mini,
.operator-note,
.copyright {
  color: var(--vesso-muted);
}

input,
textarea,
select {
  color: var(--vesso-text) !important;
  border-color: var(--vesso-border-strong) !important;
  background: var(--vesso-surface) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--vesso-accent-strong) !important;
  box-shadow: 0 0 0 4px rgba(24, 205, 183, 0.14) !important;
}

.logo,
.brand-word,
.partner-logo {
  color: var(--vesso-primary) !important;
}

.accent-e,
.brand-word .accent,
.partner-logo .accent {
  color: var(--vesso-accent) !important;
  text-shadow: 0.6px 0 0 var(--vesso-accent), 0 0.6px 0 var(--vesso-accent) !important;
}

.shell,
.page > .top,
.topbar,
.sidebar,
.panel,
.card,
.legal-card,
.band,
.metric,
.dash-card,
.group-card,
.stats-card,
.form-section,
.side-section,
.object-card,
.table-card,
.faq-card,
.why-card,
.benefit,
.partner-auth-card,
.partner-kpis article,
.partner-money-row,
.partner-table-wrap {
  border-color: var(--vesso-border) !important;
  background-color: var(--vesso-surface) !important;
  box-shadow: var(--vesso-shadow-soft) !important;
}

.page > .top,
.topbar,
.sidebar {
  background: rgba(255, 255, 255, 0.96) !important;
}

.shell {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--vesso-border) !important;
  box-shadow: var(--vesso-shadow) !important;
}

.hero-status,
.next-action-card,
.referral-band,
.partner-referral-band,
.notice,
.ui-empty-state,
.quick-group-card,
.activity-item,
.publish-box,
.object-insights,
.preview-note {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface-soft) !important;
}

.shell > section.brand,
.onboarding-ui .steps {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface-soft) !important;
  box-shadow: var(--vesso-shadow-soft) !important;
}

.btn:not(.secondary):not(.danger):not(.danger-lite):not(.btn-red):not(.btn-gray),
.login,
button[type="submit"]:not(.secondary):not(.danger):not(.danger-lite):not(.btn-red):not(.btn-gray):not(.google-btn):not(.partner-logout):not(.desktop-connect__change),
.partner-primary-button,
.partner-filter-button,
.partner-copy-control button {
  color: #fff !important;
  background: linear-gradient(180deg, #0a5b50, var(--vesso-primary)) !important;
  border-color: var(--vesso-primary) !important;
  box-shadow: 0 14px 30px rgba(6, 63, 56, 0.18) !important;
}

.btn.secondary,
button.secondary,
.btn-gray,
.btn.light,
.outline-btn,
.google-btn,
.partner-logout,
.desktop-connect__change {
  color: var(--vesso-primary) !important;
  background: var(--vesso-surface) !important;
  border-color: var(--vesso-border-strong) !important;
  box-shadow: var(--vesso-shadow-soft) !important;
}

.lang-switch,
.chip,
.ticks li,
.trial-note,
.top-pill,
.profile-pill,
.ui-section-nav,
.desktop-connect__status,
.desktop-connect__qr,
.desktop-connect__loading {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface) !important;
}

.lang-switch a.active,
.tab.active,
.mobile-tabbar a.active {
  color: #fff !important;
  background: var(--vesso-primary) !important;
}

.status-pill:not(.bad),
.pill:not(.draft):not(.archived),
.screen-pill,
.status:not(.off),
.support-bubble.notification,
.desktop-connect__connected,
.desktop-connect__mobile-login:not([hidden]) {
  color: #08715f !important;
  border-color: #bfe9e1 !important;
  background: var(--vesso-accent-soft) !important;
}

/* Landing page: neutral frame, with mint reserved for the product preview. */
.hero::before {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface) !important;
  box-shadow: var(--vesso-shadow) !important;
}

.mock-blob {
  background: transparent !important;
  opacity: 0 !important;
}

.mock {
  border-color: #cde2dd !important;
  background: linear-gradient(135deg, #edf8f5 0%, #f7faf9 56%, #deeee9 100%) !important;
  box-shadow: 0 26px 64px rgba(23, 40, 37, 0.12) !important;
}

.mock::before {
  background: none !important;
}

.mock-card,
.live-list,
.activity-feed,
.product-card,
.product-screen,
.step,
.banner {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface) !important;
  box-shadow: var(--vesso-shadow-soft) !important;
}

.product-card.real,
.product-card.real .product-price,
.product-card.real .product-screen,
.mock-icon.blue {
  border-color: #cbdce8 !important;
  background: var(--vesso-blue-soft) !important;
  color: var(--vesso-blue) !important;
}

.product-card.real h3 {
  color: #3f7197 !important;
}

.product-card:hover {
  border-color: #8fbeb3 !important;
  background: #fbfdfc !important;
  box-shadow: 0 24px 64px rgba(23, 40, 37, 0.14), 0 0 0 4px rgba(24, 205, 183, 0.1) !important;
}

.product-card.real:hover {
  border-color: #9dbbd1 !important;
  background: #f3f7fa !important;
  box-shadow: 0 24px 64px rgba(45, 78, 102, 0.15), 0 0 0 4px rgba(79, 130, 168, 0.1) !important;
}

.ring {
  background: conic-gradient(var(--vesso-accent) 0 38%, var(--vesso-blue) 38% 70%, #cfdbd8 70% 100%) !important;
}

.ring::after {
  background: var(--vesso-surface-soft) !important;
}

/* Admin and client workspaces. */
.admin-ui .nav a:hover,
.admin-ui .nav a.active,
.step.active,
.dash-icon,
.group-number,
.card-icon,
.screen-thumb,
.partner-referral-band {
  background: var(--vesso-accent-soft) !important;
}

.admin-ui .main,
.portal-ui .real-estate-content,
.portal-ui .content,
.partner-main {
  color: var(--vesso-text);
}

.admin-ui table th,
.portal-ui table th,
.partner-table-wrap th {
  color: var(--vesso-muted) !important;
  background: var(--vesso-surface-soft) !important;
}

.admin-ui table td,
.portal-ui table td,
.partner-table-wrap td {
  color: var(--vesso-text) !important;
  border-color: var(--vesso-border) !important;
}

.support-dialog,
.support-form,
.support-bubble,
.mobile-tabbar {
  border-color: var(--vesso-border) !important;
  background: var(--vesso-surface) !important;
}

.support-head,
.support-messages,
.telegram-chat {
  background: var(--vesso-surface-soft) !important;
}

.telegram-top {
  background: linear-gradient(180deg, #0b7c68, var(--vesso-primary)) !important;
}

.partner-auth-page {
  background: var(--vesso-bg-alt) !important;
}

@media (min-width: 641px) {
  .portal-ui .app {
    border-color: var(--vesso-border) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--vesso-shadow) !important;
  }
}

@media (max-width: 640px) {
  html body {
    background: var(--vesso-bg) !important;
  }

  .portal-ui .app {
    background: transparent !important;
    box-shadow: none !important;
  }
}