/*
 * SaloCart V5.2.10 — Logo palette system
 * Derived from the supplied SaloCart 3D logo:
 * cart green, community blue, and warm savings yellow/orange.
 * This is a presentation-only layer. It intentionally leaves all business
 * workflows, API calls, order state, and permissions untouched.
 */

:root,
html[data-role-theme] {
  /* Brand core: deep tones retain readable white button text. */
  --sc-green: #0F8318;
  --sc-green-deep: #07630E;
  --sc-green-dark: #054B0A;
  --sc-green-vivid: #1FAD0B;
  --sc-green-soft: #EAF9E7;

  --sc-blue: #0863D4;
  --sc-blue-deep: #064BA7;
  --sc-blue-soft: #EAF3FF;

  --sc-yellow: #FFBA0A;
  --sc-yellow-soft: #FFF5D8;
  --sc-orange: #F59A11;

  --sc-lime: #73D53B;
  --sc-lime-soft: #F0FBE6;
  --sc-mint: #EAF9E8;
  --sc-mint-strong: #D7F3D2;

  --sc-coral: #C8424C;
  --sc-ink: #12331C;
  --sc-ink-soft: #4D6655;
  --sc-muted: #6B8172;
  --sc-line: #D7E9D8;
  --sc-line-strong: #BCDCC0;
  --sc-soft: #F7FCF5;
  --sc-surface: #FFFFFF;
  --sc-surface-alt: #F1F9F0;
  --sc-shadow-xs: 0 2px 10px rgba(10, 74, 18, .06);
  --sc-shadow-sm: 0 13px 30px rgba(9, 72, 20, .10);
  --sc-shadow-lg: 0 30px 72px rgba(8, 59, 16, .18);

  /* Keep every dashboard role part of one SaloCart brand system. */
  --role-primary: var(--sc-green);
  --role-primary-deep: var(--sc-green-deep);
  --role-accent: var(--sc-yellow);
  --role-soft: var(--sc-mint);
  --role-ink: var(--sc-ink);
  --role-muted: var(--sc-muted);
  --role-line: var(--sc-line);
  --role-page: var(--sc-soft);
  --role-glow: rgba(31, 173, 11, .16);
  --role-gradient: linear-gradient(120deg, #054B0A 0%, #0F8318 52%, #1FAD0B 100%);
  --role-contrast: #FFFFFF;
}

html[data-theme="dark"],
html[data-theme="dark"][data-role-theme] {
  color-scheme: dark;
  --sc-green: #11851A;
  --sc-green-deep: #67E65A;
  --sc-green-dark: #07380B;
  --sc-green-vivid: #55D541;
  --sc-green-soft: #103A14;

  --sc-blue: #73B5FF;
  --sc-blue-deep: #B7D8FF;
  --sc-blue-soft: #123554;

  --sc-yellow: #FFD35A;
  --sc-yellow-soft: #4B3A09;
  --sc-orange: #FFB522;

  --sc-lime: #87E85A;
  --sc-lime-soft: #223F15;
  --sc-mint: #103816;
  --sc-mint-strong: #164D1C;

  --sc-coral: #FF9AA3;
  --sc-ink: #F1FBEF;
  --sc-ink-soft: #C9DCC9;
  --sc-muted: #9BB19D;
  --sc-line: #2B5030;
  --sc-line-strong: #426F48;
  --sc-soft: #08130A;
  --sc-surface: #0E1D10;
  --sc-surface-alt: #142617;
  --sc-shadow-xs: 0 3px 14px rgba(0, 0, 0, .25);
  --sc-shadow-sm: 0 16px 36px rgba(0, 0, 0, .33);
  --sc-shadow-lg: 0 32px 76px rgba(0, 0, 0, .48);

  --role-primary: var(--sc-green);
  --role-primary-deep: var(--sc-green-deep);
  --role-accent: var(--sc-yellow);
  --role-soft: var(--sc-mint);
  --role-ink: var(--sc-ink);
  --role-muted: var(--sc-muted);
  --role-line: var(--sc-line);
  --role-page: var(--sc-soft);
  --role-glow: rgba(85, 213, 65, .18);
  --role-gradient: linear-gradient(120deg, #07380B 0%, #0F8318 52%, #1D9E20 100%);
}

html,
body { background: var(--sc-soft); }

body {
  background:
    radial-gradient(740px 360px at 103% -120px, rgba(8, 99, 212, .11), transparent 68%),
    radial-gradient(520px 280px at -9% 28%, rgba(31, 173, 11, .11), transparent 68%),
    radial-gradient(360px 230px at 54% 110%, rgba(255, 186, 10, .07), transparent 72%),
    linear-gradient(180deg, #FCFFFB 0%, var(--sc-soft) 64%, #F2FAF0 100%) !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(760px 360px at 105% -140px, rgba(72, 151, 255, .15), transparent 70%),
    radial-gradient(520px 280px at -9% 28%, rgba(85, 213, 65, .12), transparent 70%),
    linear-gradient(180deg, #0B170C 0%, var(--sc-soft) 66%, #0B160C 100%) !important;
}

::selection { background: var(--sc-blue); color: #FFFFFF; }

/* Establish the logo colors on major branded surfaces. */
.topbar {
  border-bottom-color: color-mix(in srgb, var(--sc-line) 94%, transparent) !important;
}

.brand-mark.brand-mark-logo {
  border-color: color-mix(in srgb, var(--sc-green) 22%, var(--sc-line)) !important;
  box-shadow: 0 8px 19px rgba(10, 112, 20, .17) !important;
}

.brand-copy strong { color: var(--sc-green) !important; }
.brand-copy strong span { color: var(--sc-blue) !important; }

.hero,
.dashboard-banner {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 191, 15, .92) 0, transparent 18%),
    radial-gradient(circle at 76% 88%, rgba(8, 99, 212, .36) 0, transparent 29%),
    linear-gradient(120deg, var(--sc-green-dark) 0%, var(--sc-green-deep) 46%, var(--sc-green) 76%, var(--sc-green-vivid) 100%) !important;
}

.hero h1 em { color: #FFF0B8 !important; }
.hero-copy,
.dashboard-banner p { color: #E8FFEA !important; }

/* Green is the clear primary action; blue is a supportive action. */
.btn-sc,
.nav-primary,
.auth-tab.is-active {
  background: linear-gradient(135deg, var(--sc-green-deep), var(--sc-green)) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 9px 18px rgba(7, 99, 14, .20) !important;
}

.btn-sc:hover,
.nav-primary:hover,
.auth-tab.is-active:hover {
  background: linear-gradient(135deg, var(--sc-green-dark), var(--sc-green-deep)) !important;
  color: #FFFFFF !important;
}

.btn-sc-alt {
  background: var(--sc-blue-soft) !important;
  color: var(--sc-blue-deep) !important;
  border-color: color-mix(in srgb, var(--sc-blue) 16%, var(--sc-line)) !important;
}

.btn-sc-alt:hover {
  background: color-mix(in srgb, var(--sc-blue-soft) 72%, #FFFFFF) !important;
  color: var(--sc-blue-deep) !important;
}

.btn-sc-light {
  background: var(--sc-surface) !important;
  color: var(--sc-ink) !important;
  border-color: var(--sc-line) !important;
}

.btn-sc-light:hover {
  background: var(--sc-mint) !important;
  color: var(--sc-green-deep) !important;
  border-color: color-mix(in srgb, var(--sc-green) 38%, var(--sc-line)) !important;
}

.filter-chip.active,
.filter-chip:hover {
  background: var(--sc-green) !important;
  border-color: var(--sc-green) !important;
  color: #FFFFFF !important;
}

.desktop-nav button.active {
  background: var(--sc-blue-soft) !important;
  color: var(--sc-blue-deep) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-blue) 18%, transparent) !important;
}

.desktop-nav button:hover,
.icon-button:hover,
.auth-tab:hover,
.auth-password-toggle:hover {
  color: var(--sc-blue-deep) !important;
}

.location-pill i,
.section-kicker,
.auth-eyebrow,
.startup-guide-kicker { color: var(--sc-blue) !important; }

/* Savings, targets and helpful notices inherit the logo's warm accent. */
.deal-saving,
.price-savings,
.savings-badge,
.target-badge {
  background: var(--sc-yellow) !important;
  color: #503600 !important;
}

.progress-line > span,
.seller-progress-bar > span,
.deal-target-progress > span {
  background: linear-gradient(90deg, var(--sc-green), var(--sc-green-vivid), var(--sc-yellow)) !important;
}

.deal-price-grid strong,
.sale-price,
.money-value,
.stat-card strong { color: var(--sc-green-deep); }

/* Community cards, first-open guide, and account surfaces use all three logo hues deliberately. */
.role-guide-card,
.startup-guide-hero {
  border-color: color-mix(in srgb, var(--sc-green) 19%, var(--sc-line)) !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 186, 10, .18), transparent 34%),
    radial-gradient(circle at 6% 96%, rgba(8, 99, 212, .11), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--sc-mint) 78%, #FFFFFF), var(--sc-surface)) !important;
}

.role-guide-card__icon,
.role-guide-step-number,
.startup-guide-step-number {
  background: linear-gradient(145deg, var(--sc-green-deep), var(--sc-green)) !important;
  color: #FFFFFF !important;
}

.startup-guide-step:nth-child(2) .startup-guide-step-number {
  background: linear-gradient(145deg, var(--sc-blue-deep), var(--sc-blue)) !important;
}

.startup-guide-step:nth-child(3) .startup-guide-step-number {
  background: linear-gradient(145deg, #D98205, var(--sc-yellow)) !important;
  color: #4A3200 !important;
}

.startup-guide-benefits li {
  background: color-mix(in srgb, var(--sc-mint) 72%, #FFFFFF) !important;
}

.startup-guide-benefits li:nth-child(2) i { color: var(--sc-blue) !important; }
.startup-guide-benefits li:nth-child(3) i { color: #D98205 !important; }
.startup-guide-note {
  background: var(--sc-yellow-soft) !important;
  color: #5A4300 !important;
}
.startup-guide-note i { color: #C57904 !important; }

/* Keep the new palette coherent in the persistent mobile navigation. */
.mobile-nav {
  border-top-color: var(--sc-line) !important;
  background: color-mix(in srgb, var(--sc-surface) 94%, transparent) !important;
}
.nav-item.active { color: var(--sc-blue-deep) !important; }

/* Controls, focus and inputs have the same blue-green conversation as the logo. */
:where(button, a, input, select, textarea):focus-visible {
  outline-color: color-mix(in srgb, var(--sc-blue) 58%, transparent) !important;
}

.form-control:focus,
.form-select:focus,
.auth-field .form-control:focus {
  border-color: var(--sc-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-blue) 16%, transparent) !important;
}

/* Dark mode specifics retain contrast while keeping the same branded family. */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .dashboard-banner {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 211, 90, .78) 0, transparent 18%),
    radial-gradient(circle at 76% 88%, rgba(115, 181, 255, .25) 0, transparent 30%),
    linear-gradient(120deg, #062B08 0%, #07520C 46%, #0D7D18 100%) !important;
}

html[data-theme="dark"] .btn-sc,
html[data-theme="dark"] .nav-primary,
html[data-theme="dark"] .auth-tab.is-active {
  background: linear-gradient(135deg, #087012, #11851A) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .role-guide-card,
html[data-theme="dark"] .startup-guide-hero {
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 211, 90, .14), transparent 34%),
    radial-gradient(circle at 6% 96%, rgba(115, 181, 255, .12), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--sc-mint) 88%, #000000), var(--sc-surface)) !important;
}

html[data-theme="dark"] .btn-sc-alt { color: var(--sc-blue-deep) !important; }
html[data-theme="dark"] .deal-price-grid strong,
html[data-theme="dark"] .sale-price,
html[data-theme="dark"] .money-value,
html[data-theme="dark"] .stat-card strong { color: var(--sc-green-deep); }

@media (prefers-reduced-motion: reduce) {
  .btn-sc,
  .btn-sc-alt,
  .btn-sc-light,
  .nav-primary,
  .auth-tab { transition: none !important; }
}