/*
  V-3 WiWiStore backend design system primitives.
  This file is intentionally generic: product consoles keep their local
  selectors, while these tokens and utility classes keep spacing, color,
  typography, and action states consistent.
*/
:root {
  --wiwi-bg: #120f12;
  --wiwi-bg-soft: #1c1518;
  --wiwi-surface: rgba(255, 250, 241, 0.96);
  --wiwi-surface-dark: rgba(19, 23, 28, 0.9);
  --wiwi-surface-soft: rgba(255, 255, 255, 0.08);
  --wiwi-text: #f9f1e6;
  --wiwi-text-ink: #241d19;
  --wiwi-muted: #bdaea2;
  --wiwi-muted-ink: #6f5a51;
  --wiwi-border: rgba(219, 177, 111, 0.28);
  --wiwi-border-soft: rgba(255, 255, 255, 0.14);
  --wiwi-accent: #d8a85f;
  --wiwi-accent-2: #f2d18a;
  --wiwi-accent-soft: rgba(216, 168, 95, 0.14);
  --wiwi-success: #62c891;
  --wiwi-success-soft: rgba(98, 200, 145, 0.14);
  --wiwi-warning: #f0bd5a;
  --wiwi-warning-soft: rgba(240, 189, 90, 0.16);
  --wiwi-danger: #e76f61;
  --wiwi-danger-soft: rgba(231, 111, 97, 0.16);
  --wiwi-info: #6da8d8;
  --wiwi-info-soft: rgba(109, 168, 216, 0.15);
  --wiwi-radius-sm: 10px;
  --wiwi-radius: 16px;
  --wiwi-radius-lg: 22px;
  --wiwi-shadow-sm: 0 12px 30px rgba(24, 14, 10, 0.12);
  --wiwi-shadow: 0 22px 64px rgba(0, 0, 0, 0.24);
  --wiwi-shadow-strong: 0 30px 90px rgba(0, 0, 0, 0.34);
  --font-title: clamp(1.75rem, 2.2vw, 2.75rem);
  --font-section: clamp(1.28rem, 1.45vw, 1.8rem);
  --font-card-title: clamp(1rem, 1vw, 1.18rem);
  --font-body: 1rem;
  --font-caption: 0.86rem;
  --font-kpi: clamp(2.1rem, 3vw, 3.35rem);
}

.wiwi-page {
  min-width: 0;
  color: var(--wiwi-text);
  font-size: var(--font-body);
}

.wiwi-section,
.wiwi-card,
.wiwi-kpi-card,
.wiwi-copilot-panel,
.wiwi-empty-state,
.wiwi-alert {
  min-width: 0;
  border: 1px solid var(--wiwi-border);
  border-radius: var(--wiwi-radius-lg);
  box-shadow: var(--wiwi-shadow-sm);
}

.wiwi-section,
.wiwi-card,
.wiwi-copilot-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
    var(--wiwi-surface-dark);
}

.wiwi-kpi-card {
  padding: 18px;
  background: linear-gradient(145deg, rgba(216, 168, 95, 0.18), rgba(255, 255, 255, 0.04));
}

.wiwi-kpi-card strong {
  display: block;
  color: var(--wiwi-text);
  font-size: var(--font-kpi);
  line-height: 1;
}

.wiwi-kpi-card span,
.wiwi-kpi-card small {
  color: var(--wiwi-muted);
  font-weight: 850;
}

.wiwi-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--wiwi-border);
  border-radius: 999px;
  color: var(--wiwi-accent-2);
  background: var(--wiwi-accent-soft);
  font-size: var(--font-caption);
  font-weight: 900;
}

.wiwi-primary-action,
.wiwi-secondary-action,
.wiwi-danger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 14px;
  padding: 0 18px;
  font-weight: 950;
  text-decoration: none;
}

.wiwi-primary-action {
  color: #21140f;
  background: linear-gradient(135deg, var(--wiwi-accent-2), var(--wiwi-accent));
  box-shadow: 0 14px 32px rgba(216, 168, 95, 0.22);
}

.wiwi-secondary-action {
  color: var(--wiwi-text);
  border: 1px solid var(--wiwi-border-soft);
  background: rgba(255, 255, 255, 0.08);
}

.wiwi-danger-action {
  color: #fff8ee;
  background: linear-gradient(135deg, var(--wiwi-danger), #9f342e);
}

.wiwi-progress {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.wiwi-progress > i,
.wiwi-progress > span {
  display: block;
  width: var(--progress, var(--w, 0%));
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wiwi-accent-2), var(--wiwi-accent));
}

.wiwi-progress.is-good > i,
.wiwi-progress.is-good > span {
  background: linear-gradient(90deg, #8de5be, var(--wiwi-success));
}

.wiwi-progress.is-warning > i,
.wiwi-progress.is-warning > span {
  background: linear-gradient(90deg, #ffd983, var(--wiwi-warning));
}

.wiwi-progress.is-danger > i,
.wiwi-progress.is-danger > span {
  background: linear-gradient(90deg, #ffb09d, var(--wiwi-danger));
}

.wiwi-alert {
  padding: 14px 16px;
  color: var(--wiwi-text);
  background: var(--wiwi-warning-soft);
}

.wiwi-empty-state {
  padding: 18px;
  color: var(--wiwi-muted);
  background: rgba(255, 255, 255, 0.05);
}

.wiwi-mobile-card-list {
  display: grid;
  gap: 12px;
}

@media (max-width: 760px) {
  :root {
    --font-title: 1.72rem;
    --font-section: 1.3rem;
    --font-kpi: 2.25rem;
  }

  .wiwi-primary-action,
  .wiwi-secondary-action,
  .wiwi-danger-action {
    width: 100%;
    min-height: 52px;
  }
}