/* INDIE Group Design System — token subset dipakai monitor.indiegroup.id.
   Sumber acuan (tidak bisa diakses saat build): colors_and_type.css artifact project.
   Nilai di bawah direkonstruksi dari deskripsi task — verifikasi visual ke Bram kalau ada token asli. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  /* Surfaces */
  --bg: #FAFAF7;
  --bg-inverse: #001933;
  --surface: #FFFFFF;
  --surface-inverse: #052A4D;
  --line: #E6E4DD;
  --line-inverse: rgba(255,255,255,.14);

  /* Ink */
  --ink: #14171A;
  --ink-mute: #5C6470;
  --ink-inverse: #FFFFFF;
  --ink-inverse-mute: rgba(255,255,255,.66);

  /* Brand */
  --indie-orange-500: #F04000;
  --indie-orange-600: #D63600;
  --indie-orange-100: #FFE6DB;
  --indie-navy-900: #001933;

  /* Semantic */
  --success: #2E8B57;
  --success-bg: #E4F3EA;
  --warning: #C48A00;
  --warning-bg: #FBF0D6;
  --danger:  #D03020;
  --danger-bg:  #FBE3E0;

  /* Radius / shadow */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 10px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,23,26,.06), 0 1px 1px rgba(20,23,26,.04);
  --shadow-2: 0 4px 14px rgba(20,23,26,.08);

  /* Type */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.display-num {
  font-family: var(--font-display);
  letter-spacing: .01em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger); }
.pill-neutral { background: #EFEDE6; color: var(--ink-mute); }
.pill-live {
  background: var(--success-bg); color: var(--success);
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}