/*
 * Creovative Panel — Design System (pusat token & tipografi)
 * Ubah warna, font-size, radius, shadow di sini — berlaku semua halaman panel.
 */

body.panel-smart.creo-ds,
body.creo-ds {
  --creo-brand: #1d7373;
  --creo-brand-dark: #165c5c;
  --creo-brand-mid: #2c8e8e;
  --creo-brand-light: #5ec9c9;
  --creo-brand-soft: #e8f4f3;
  --creo-ink: #0f172a;
  --creo-ink-muted: #64748b;
  --creo-surface: #ffffff;
  --creo-bg: #f4faf9;
  --creo-line: #e2e8f0;
  --creo-danger: #dc2626;
  --creo-warning: #d97706;
  --creo-success: #059669;
  --creo-info: #0284c7;
  --creo-radius: 16px;
  --creo-radius-sm: 12px;
  --creo-radius-xs: 8px;
  --creo-shadow-sm: 0 2px 8px rgba(29, 115, 115, 0.07);
  --creo-shadow-md: 0 8px 28px rgba(29, 115, 115, 0.12);
  --creo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --creo-text-base: 0.875rem;
  --creo-text-sm: 0.8125rem;
  --creo-text-xs: 0.75rem;
  --creo-text-lg: 1rem;
  --creo-heading: 1.02rem;
  --creo-space-1: 0.25rem;
  --creo-space-2: 0.5rem;
  --creo-space-3: 0.75rem;
  --creo-space-4: 1rem;
  --creo-space-5: 1.25rem;
  --creo-space-6: 1.5rem;

  font-family: var(--creo-font);
  font-size: var(--creo-text-base);
  line-height: 1.6;
  color: var(--creo-ink);
}

body.panel-smart.creo-ds .creo-page-stack,
body.creo-ds .creo-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--creo-space-5);
  max-width: 100%;
}

body.creo-ds .creo-page-intro {
  font-size: 0.875rem;
  color: var(--creo-ink-muted);
  line-height: 1.55;
  margin: 0;
}

body.creo-ds .creo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--creo-space-4);
}

body.creo-ds .creo-kpi-card {
  background: linear-gradient(145deg, var(--creo-brand-mid) 0%, var(--creo-brand-dark) 100%);
  color: #fff;
  border-radius: var(--creo-radius);
  padding: var(--creo-space-5);
  box-shadow: var(--creo-shadow-sm);
}

body.creo-ds .creo-kpi-card__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.88;
}

body.creo-ds .creo-kpi-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: var(--creo-space-1);
  line-height: 1.2;
}

body.creo-ds .creo-empty {
  text-align: center;
  padding: var(--creo-space-6) var(--creo-space-4);
  color: var(--creo-ink-muted);
  font-size: 0.9rem;
}

body.creo-ds .creo-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--creo-space-3);
  opacity: 0.45;
}