/* ═══════════════════════════════════════════════════════════════
   SIMRS — DESIGN TOKENS
   Sumber kebenaran tunggal untuk warna, skala, ritme, dan elevasi.
   Prinsip sistem ini: PRESISI, bukan dekorasi.
     · Pemisah = garis rambut 1px, bukan bayangan.
     · Bayangan hanya untuk lapisan yang benar-benar melayang.
     · Aksen biru dipakai hemat — hanya untuk state & aksi utama.
     · Angka selalu tabular; data selalu mono.
   Edit file ini untuk mengubah tampilan secara global.
═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand & Semantik ──────────────────────────────────────── */
  --brand-primary:  #2563eb;
  --brand-hover:    #1d4ed8;
  --brand-active:   #1e40af;
  --brand-light:    #eff6ff;
  --brand-ring:     rgba(37, 99, 235, .18);
  --brand-accent:   #7c3aed;
  --brand-warn:     #b45309;
  --brand-danger:   #be123c;
  --brand-success:  #15803d;
  --brand-info:     #0369a1;

  /* Permukaan semantik lembut — dasar badge, alert, highlight baris */
  --tint-success: #f0fdf4;
  --tint-warn:    #fffbeb;
  --tint-danger:  #fff1f2;
  --tint-info:    #f0f9ff;
  --tint-brand:   #eff6ff;

  --line-success: #bbf7d0;
  --line-warn:    #fde68a;
  --line-danger:  #fecdd3;
  --line-info:    #bae6fd;
  --line-brand:   #bfdbfe;

  /* ── Satu Sehat ────────────────────────────────────────────── */
  --ss-teal:        #0f766e;
  --ss-teal-light:  #f0fdfa;
  --ss-teal-line:   #99f6e4;

  /* ── Warna biru (alias) ────────────────────────────────────── */
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-500:  #3b82f6;
  --blue-600:  #2563eb;
  --blue-700:  #1d4ed8;

  /* ── Alias kompatibilitas (dipakai inline di beberapa view) ── */
  --glass-bg:     #fafbfc;
  --glass-border: #e3e8ef;
  --glass-hover:  #f4f6f9;
  --bg-surface:   #eef1f5;
  --bg-mid:       #fafbfc;

  /* ── Background konten ─────────────────────────────────────── */
  --bg-base:    #eef1f5;   /* kanvas aplikasi */
  --bg-card:    #ffffff;   /* permukaan utama */
  --bg-raised:  #fafbfc;   /* header tabel, header kartu, footer */
  --bg-sunken:  #f4f6f9;   /* baris hover, well, kode */
  --bg-input:   #ffffff;

  /* ── Garis rambut ──────────────────────────────────────────── */
  --border:        #e3e8ef;  /* pemisah standar */
  --border-soft:   #eef1f5;  /* pemisah dalam grup rapat */
  --border-strong: #d4dbe5;  /* batas kontrol form & pembungkus */
  --border-hover:  #b9c3d1;

  /* ── Teks ──────────────────────────────────────────────────── */
  --text-primary:   #101827;  /* 15.9:1 di atas putih */
  --text-secondary: #46536b;  /*  8.4:1 */
  --text-muted:     #64748b;  /*  4.8:1 — aman untuk label & placeholder */
  --text-faint:     #94a3b8;  /* hanya untuk ikon dekoratif, bukan teks */
  --text-inverse:   #ffffff;

  /* ── Sidebar (navy — identitas produk) ─────────────────────── */
  --sb-bg:           #0d1526;
  --sb-bg-deep:      #0a1120;
  --sb-border:       rgba(148, 163, 184, .13);
  --sb-text:         #98a6bd;  /* 6.1:1 di atas #0d1526 */
  --sb-text-hover:   #e6ecf5;
  --sb-hover-bg:     rgba(148, 163, 184, .09);
  --sb-active-bg:    rgba(59, 130, 246, .16);
  --sb-active-text:  #bfdbfe;
  --sb-active-border:#3b82f6;
  --sb-section:      #6f7f99;  /* 4.6:1 — label seksi tetap terbaca */
  --sb-icon-bg:      rgba(148, 163, 184, .10);
  --sb-icon-active:  rgba(59, 130, 246, .22);

  /* ── Dimensi rangka ────────────────────────────────────────── */
  --sidebar-w:        248px;
  --sidebar-w-closed:  64px;
  --topbar-h:          56px;
  --content-max:     1560px;

  /* ── Skala ruang (basis 4px) ───────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;

  /* ── Tipografi ─────────────────────────────────────────────── */
  --font-ui:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Skala tipografi — langkah jelas, tidak ada ukuran kembar */
  --font-xs:   11.5px;
  --font-sm:   12.5px;
  --font-base: 14px;   /* teks kerja: sel tabel, isi form, paragraf */
  --font-md:   15.5px;
  --font-lg:   18px;
  --font-xl:   23px;
  --font-2xl:  28px;
  --font-num:  32px;   /* angka metrik */

  --lh-body:    1.55;
  --lh-tight:   1.35;
  --lh-heading: 1.2;

  /* Tracking: makin besar teks, makin rapat */
  --tr-caps:    .08em;   /* label uppercase */
  --tr-tight:  -.011em;  /* judul */
  --tr-tighter:-.022em;  /* angka & display */

  /* ── Transisi ──────────────────────────────────────────────── */
  --t-fast:   110ms cubic-bezier(.32, .72, 0, 1);
  --t-normal: 190ms cubic-bezier(.32, .72, 0, 1);
  --t-slow:   300ms cubic-bezier(.32, .72, 0, 1);

  /* ── Radius — sudut tegas, presisi klinis ──────────────────── */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 9px;
  --r-xl: 12px;
  --r-pill: 99px;

  /* ── Elevasi ───────────────────────────────────────────────── */
  /* Permukaan datar memakai garis rambut, bukan shadow.          */
  /* Shadow hanya untuk yang benar-benar melayang di atas konten. */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(16, 24, 39, .05);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 39, .12), 0 2px 5px -2px rgba(16, 24, 39, .07);
  --shadow-lg: 0 18px 38px -12px rgba(16, 24, 39, .22), 0 6px 14px -6px rgba(16, 24, 39, .10);
  --shadow-inset-t: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ── Cincin fokus — satu definisi, dipakai di seluruh app ──── */
  --ring:       0 0 0 3px var(--brand-ring);
  --ring-inset: inset 0 0 0 1px var(--brand-primary);
}

/* ── Permukaan browser: bagian yang tidak digambar pun ikut sistem ── */
::selection      { background: #bfdbfe; color: #0b1220; }
::-moz-selection { background: #bfdbfe; color: #0b1220; }

html { accent-color: var(--brand-primary); caret-color: var(--brand-primary); }