/*
 * Kurd Store VIP — centralized theme system
 * Change the values in the first two blocks to restyle the full interface.
 */
:root {
  --theme-bg: #f4f7fb;
  --theme-bg-muted: #edf2f7;
  --theme-surface: #ffffff;
  --theme-surface-raised: #ffffff;
  --theme-surface-soft: #f8fafc;
  --theme-sidebar: #ffffff;
  --theme-overlay: rgb(15 23 42 / 52%);
  --theme-text: #172033;
  --theme-text-muted: #637083;
  --theme-text-soft: #445066;
  --theme-border: #dce3ec;
  --theme-border-strong: #c6d0dd;
  --theme-primary: #3157d5;
  --theme-primary-hover: #2648b8;
  --theme-secondary: #7451cc;
  --theme-success: #168563;
  --theme-danger: #c53d55;
  --theme-warning: #b36b08;
  --theme-on-primary: #ffffff;
  --theme-focus: rgb(49 87 213 / 32%);
  --theme-shadow-sm: 0 6px 18px rgb(27 39 63 / 8%);
  --theme-shadow-md: 0 16px 44px rgb(27 39 63 / 12%);
  --theme-radius-sm: 12px;
  --theme-radius-md: 18px;
  --theme-radius-lg: 26px;

  /* Compatibility aliases: all legacy surfaces now resolve through this system. */
  --bg: var(--theme-bg);
  --bg2: var(--theme-bg-muted);
  --panel: var(--theme-surface);
  --panel2: var(--theme-surface-soft);
  --panel3: var(--theme-bg-muted);
  --line: var(--theme-border);
  --line2: var(--theme-border-strong);
  --text: var(--theme-text);
  --muted: var(--theme-text-muted);
  --soft: var(--theme-text-soft);
  --blue: var(--theme-primary);
  --purple: var(--theme-secondary);
  --green: var(--theme-success);
  --red: var(--theme-danger);
  --amber: var(--theme-warning);
  --ui-bg: var(--theme-bg);
  --ui-surface: var(--theme-surface);
  --ui-surface-strong: var(--theme-surface-raised);
  --ui-soft: var(--theme-surface-soft);
  --ui-line: var(--theme-border);
  --ui-line-strong: var(--theme-border-strong);
  --ui-text: var(--theme-text);
  --ui-muted: var(--theme-text-muted);
  --ui-accent: var(--theme-primary);
  --ui-success: var(--theme-success);
  --ui-danger: var(--theme-danger);
  --ui-shadow: var(--theme-shadow-md);
  --ui-shadow-soft: var(--theme-shadow-sm);
  --shell-bg: var(--theme-bg);
  --shell-surface: var(--theme-surface);
  --shell-surface-2: var(--theme-surface-soft);
  --shell-line: var(--theme-border);
  --shell-text: var(--theme-text);
  --shell-muted: var(--theme-text-muted);
  --v14-bg: var(--theme-bg);
  --v14-panel: var(--theme-surface);
  --v14-panel-2: var(--theme-surface-soft);
  --v14-panel-3: var(--theme-bg-muted);
  --v14-border: var(--theme-border);
  --v14-border-hover: var(--theme-border-strong);
  --v14-text: var(--theme-text);
  --v14-muted: var(--theme-text-muted);
  --v14-primary: var(--theme-primary);
  --v14-primary-2: var(--theme-secondary);
  --v14-green: var(--theme-success);
  --v14-amber: var(--theme-warning);
  --v14-red: var(--theme-danger);
  --v14-shadow-lg: var(--theme-shadow-md);
  --v14-shadow-md: var(--theme-shadow-sm);
}

/* Theme choices change accents while the appearance control owns light/dark surfaces. */
html[data-theme="midnight"] { --theme-primary: #3157d5; --theme-primary-hover: #2648b8; --theme-secondary: #7451cc; }
html[data-theme="aurora"] { --theme-primary: #8a3fc6; --theme-primary-hover: #7130a6; --theme-secondary: #d14c8f; }
html[data-theme="oceanPro"] { --theme-primary: #0878c9; --theme-primary-hover: #0663a6; --theme-secondary: #0b8f9c; }
html[data-theme="emerald"] { --theme-primary: #087b62; --theme-primary-hover: #06634f; --theme-secondary: #3d7d50; }
html[data-theme="goldVip"] { --theme-primary: #956312; --theme-primary-hover: #79500d; --theme-secondary: #7451a8; }

html[data-appearance="dark"] {
  --theme-bg: #0c1320;
  --theme-bg-muted: #111b2b;
  --theme-surface: #152133;
  --theme-surface-raised: #18263a;
  --theme-surface-soft: #1d2c42;
  --theme-sidebar: #101a29;
  --theme-overlay: rgb(2 6 12 / 72%);
  --theme-text: #f2f6fc;
  --theme-text-muted: #aab7c8;
  --theme-text-soft: #d2dbe7;
  --theme-border: #2c3d54;
  --theme-border-strong: #40546e;
  --theme-shadow-sm: 0 8px 22px rgb(0 0 0 / 24%);
  --theme-shadow-md: 0 18px 52px rgb(0 0 0 / 34%);
}

html, body {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
}

body {
  background-image:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--theme-primary) 9%, transparent), transparent 30%),
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--theme-secondary) 7%, transparent), transparent 25%) !important;
}

::selection { background: color-mix(in srgb, var(--theme-primary) 28%, transparent); color: var(--theme-text); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--theme-focus) !important;
  outline-offset: 2px !important;
}

.app-view,
.main-panel,
.page-host { background: transparent !important; color: var(--theme-text) !important; }

.ks-sidebar {
  background: var(--theme-sidebar) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-md) !important;
}

.side-brand,
.side-footer,
.side-user,
.topbar,
.login-card,
.ks-card,
.row-card,
.order-card,
.premium-order-card,
.stock-account-card,
.stock-card,
.stock-service-card,
.family-group-card,
.family-member-card,
.settings-section,
.content-card,
.panel,
.table-wrap,
.modal-card {
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}

.topbar { background: color-mix(in srgb, var(--theme-bg) 88%, transparent) !important; }
.side-footer { background: var(--theme-sidebar) !important; }

.page-hero,
.order-modal-hero,
.ks-view-hero,
.stock-bulk-hero {
  color: var(--theme-text) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface)),
      color-mix(in srgb, var(--theme-secondary) 6%, var(--theme-surface))) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}

.nav-btn,
.side-appearance,
.icon-btn,
.ks-ghost,
.chip,
.tab-btn {
  color: var(--theme-text-soft) !important;
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border) !important;
}

.nav-btn:hover,
.nav-btn:focus-visible,
.chip:hover,
.tab-btn:hover { color: var(--theme-text) !important; background: var(--theme-bg-muted) !important; }

.nav-btn.active,
.mobile-nav button.active,
.chip.active,
.tab-btn.active,
.ks-primary,
.ks-blue,
.ks-purple {
  color: var(--theme-on-primary) !important;
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

.ks-primary:hover,
.ks-blue:hover,
.ks-purple:hover { background: var(--theme-primary-hover) !important; }
.ks-success { color: var(--theme-on-primary) !important; background: var(--theme-success) !important; border-color: var(--theme-success) !important; }
.ks-danger { color: var(--theme-on-primary) !important; background: var(--theme-danger) !important; border-color: var(--theme-danger) !important; }

.metric-icon,
.quick-icon,
.hero-icon,
.mini-avatar,
.user-avatar,
.side-brand-logo {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 11%, var(--theme-surface-soft)) !important;
  border-color: var(--theme-border) !important;
}

.muted,
.row-sub,
.mini-label,
.page-kicker,
.section-title p,
.quick-card small,
.metric-card small,
.top-title span,
.side-user small,
.side-brand-copy span,
.ks-field,
.ks-choice-label { color: var(--theme-text-muted) !important; }

h1, h2, h3, h4, h5, h6,
.row-title,
.card-title,
.section-title,
.top-title strong,
.side-user b,
.side-brand-copy strong { color: var(--theme-text) !important; }

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.search-box,
.login-input-shell,
.pass-wrap {
  color: var(--theme-text) !important;
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border-strong) !important;
}

input::placeholder,
textarea::placeholder { color: var(--theme-text-muted) !important; opacity: .82; }

.data-table th,
.telegram-table th { color: var(--theme-text-muted) !important; background: var(--theme-bg-muted) !important; }
.data-table td,
.telegram-table td { color: var(--theme-text) !important; border-color: var(--theme-border) !important; }

.badge { color: var(--theme-text) !important; background: var(--theme-surface-soft) !important; border-color: var(--theme-border) !important; }

.modal { background: var(--theme-overlay) !important; }
.modal-close { color: var(--theme-text) !important; background: var(--theme-surface-soft) !important; border-color: var(--theme-border) !important; }
.menu-overlay { background: var(--theme-overlay) !important; }
.mobile-nav { background: var(--theme-surface-raised) !important; border-color: var(--theme-border) !important; box-shadow: var(--theme-shadow-md) !important; }
.mobile-nav button { color: var(--theme-text-muted) !important; background: transparent !important; }
.mobile-nav button.active { color: var(--theme-on-primary) !important; background: var(--theme-primary) !important; }
.mobile-quick-add { color: var(--theme-on-primary) !important; background: var(--theme-primary) !important; border-color: var(--theme-primary) !important; box-shadow: var(--theme-shadow-md) !important; }

.login-view { background: var(--theme-bg) !important; }
.login-ambient { display: none !important; }
.login-submit { color: var(--theme-on-primary) !important; background: var(--theme-primary) !important; }
.login-input-icon,
#togglePassword { color: var(--theme-text-muted) !important; background: transparent !important; border-color: var(--theme-border) !important; }

.ks-toast { color: var(--theme-text) !important; background: var(--theme-surface-raised) !important; border-color: var(--theme-border) !important; }

/* Win over older high-specificity appearance rules without introducing new colors. */
html[data-appearance] body .login-card,
html[data-appearance] body .ks-card,
html[data-appearance] body .row-card,
html[data-appearance] body .order-card,
html[data-appearance] body .premium-order-card,
html[data-appearance] body .stock-account-card,
html[data-appearance] body .family-group-card,
html[data-appearance] body .family-member-card,
html[data-appearance] body .settings-section,
html[data-appearance] body .modal-card {
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

html[data-appearance] body .login-card :is(h1, strong, b, label, span),
html[data-appearance] body .modal-card :is(h1, h2, h3, h4, strong, b),
html[data-appearance] body .ks-card :is(h1, h2, h3, h4, strong, b) { color: var(--theme-text) !important; }

html[data-appearance] body .login-input-shell input {
  color: var(--theme-text) !important;
  background: transparent !important;
}
html[data-appearance] body .login-input-shell input::placeholder { color: var(--theme-text-muted) !important; opacity: .82 !important; }
html[data-appearance] body .login-submit,
html[data-appearance] body .login-submit :is(span, b, svg) { color: var(--theme-on-primary) !important; }
html[data-appearance] body .row-sub { font-size: 12px !important; line-height: 1.45 !important; }
html[data-appearance] body :is(.mini-label, .page-kicker, .meta-item label) { font-size: 11px !important; line-height: 1.4 !important; }
html[data-appearance] body :is(.ks-field, .ks-choice-label) { font-size: 12px !important; line-height: 1.45 !important; }
html[data-appearance] body .page-host p { font-size: max(12px, .8rem) !important; line-height: 1.5 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}