/* SGC Sambil — design tokens */
:root {
  /* Neutrals (warm) */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F5F4EF;
  --surface-3: #EFEDE6;
  --border: #E8E6E0;
  --border-strong: #D9D6CD;
  --text: #0F1115;
  --text-2: #3A3D44;
  --mute: #6B6F76;
  --mute-2: #9CA0A8;

  /* Sambil brand (multi) */
  --s-magenta: #C8186E;
  --s-purple: #5B2D86;
  --s-blue: #1E3A8A;
  --s-cyan: #1FB6E6;
  --s-orange: #F26B1F;
  --s-yellow: #F2B91F;
  --s-red: #D5283A;

  /* Semantic finance */
  --ok-bg: #E7F4EC;
  --ok-fg: #1F7A43;
  --warn-bg: #FCEFD6;
  --warn-fg: #8A5A0B;
  --bad-bg: #FAE2E5;
  --bad-fg: #A21726;
  --info-bg: #E1F2FB;
  --info-fg: #105E83;
  --neutral-bg: #EEEDE7;
  --neutral-fg: #4B4F57;

  /* Radius / shadows */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 0 rgba(15,17,21,0.04), 0 1px 2px rgba(15,17,21,0.04);
  --shadow-md: 0 1px 0 rgba(15,17,21,0.04), 0 6px 20px -8px rgba(15,17,21,0.10);
  --shadow-lg: 0 1px 0 rgba(15,17,21,0.04), 0 18px 40px -16px rgba(15,17,21,0.18);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono { font-family: var(--font-mono); }

/* Common primitives */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary {
  background: #0F1115; color: #fff; border-color: #0F1115;
}
.btn.primary:hover { background: #25282E; }
.btn.brand {
  background: var(--s-magenta); color: #fff; border-color: var(--s-magenta);
}
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--neutral-bg); color: var(--neutral-fg);
  white-space: nowrap;
}
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.bad { background: var(--bad-bg); color: var(--bad-fg); }
.chip.info { background: var(--info-bg); color: var(--info-fg); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }

.hr { height: 1px; background: var(--border); border: 0; }

input, select, textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #0F1115;
  box-shadow: 0 0 0 3px rgba(15,17,21,0.08);
}

.label { font-size: 11px; font-weight: 500; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }